::before psedoclass' are incorrectly being swapped for symbols

1 Answer 34 Views
General Discussions Styling Styling / Themes
Top achievements
Rank 1
Matt asked on 21 Feb 2024, 11:41 AM


Some components have a ::before pseudoclass with the content property set to the CSS code \200B , which is a zero-width space. However, in our project, this is coming out as ​ in the DOM.

For example, with the <Dialog /> component:

1. We render the dialog within a componet, giving it a title which comes from props

const MyComponent = (props) => {
    return (
        <Dialog title={props.title} onClose={props.onClose}>
            . . .

2. Locally (running in our development environment) we can see the CSS come out as expected

3. After building and deploying to an environment, the "" gets replaced with ​

Additional Information

After building the project locally, our CSS (build/static/css/main,xyz.css) does not include these symbols:

We are using Craco to build our project:

// craco.config.js

module.exports = {
  style: {
    postcss: {
      plugins: [require('autoprefixer')]

1 Answer, 1 is accepted

Sort by
Konstantin Dikov
Telerik team
answered on 22 Feb 2024, 10:14 AM

Hi Matt,

This seems like an encoding issue. The zero-width space symbol should be displayed correctly with UTF-8 encoding, so please make sure that your default font supports the zero-width space Unicode symbol.

You can also try adding explicit UTF-8 encoding:

  <meta charset="UTF-8">

Hope this helps.


Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Top achievements
Rank 1
commented on 23 Feb 2024, 09:48 AM | edited

Hi Konstantin, thank you for your response. I agree that it looks like an encoding problem. Unfortunately, neither of your suggestions have worked.

We had UTF-8 being set in our `<head/>` tag with `<meta http-equiv=Content-Type content="text/html; charset=UTF-8">`. I changed it to `<meta charset="UTF-8">`.

I've also double checked our font. Our font family is: `Roboto,Helvetica Neue,sans-serif`. `Helvetica Neue` and `sans-serif` don't support the zero-width space, however removing them (I did this via developer tools) does not solve the issue.

I can see that the symbols are being introduced in the CSS file itself. When I open it in the network tab, I can see:

However, they are not in the build file:

(From build/static/css/main.4d4bb644.css).

Is there anything else you can suggest? Thank you.

Konstantin Dikov
Telerik team
commented on 27 Feb 2024, 06:24 AM

Hi Matt,

You can ensure the css file itself is saved with the correct encoding (although that this would not explain the initial issue).

Another thing you can try is testing the following in your build environment to see if it will work:

    .k-skeleton-text:empty::before {
      content: "\200b";
      color: red; /* Just to make it visible for testing */
  <title>Zero-Width Space Test</title>
  <div class="k-skeleton-text"></div>

Maybe you can add the style in CSS file, so you can check if there is a problem with Craco.


General Discussions Styling Styling / Themes
Asked by
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question