Search code examples
javascripthtmlcsscss-selectorspseudo-class

What can you put in before pseudo content in css?

I have inspected an icon in a website I noticed that it has something like this in css before content :

.c-navi-new-list__category-link--fresh:before {
    content: "\E0B3\00FE0E";
    font-size: 16px;
    font-size: 1.143rem;
    line-height: 1.375;
    color: #a1a3a8;
    margin-left: 4px;
}

What exactly is that code inside content ? How can I modify it ?

Solution

  • What exactly is that code inside content ? How can I modify it ?

    The code inside the content: property represents two things:

    The first part, \E0B3, is the CSS representation of a UTF-8 character icon.

    As @shafayetmaruf has already shown in his output link, the symbol is a rectangular box (see also: https://utf8-icons.com/utf-8-character-57523).

    To change the symbol being rendered you can simply change this to a different icon code (see https://www.utf8icons.com/ for other examples).

    The second part, \00FE0E is the 'text-style' unicode variation selector. Basically, when using unicode icons some browser will render the icon as an emoji instead of as text. The drawback of this is that the emoji version can't be styled using CSS, whereas the text version can. The unicode variation selector forces the icon specified in the first part to render as text so that the developer can then style it with CSS.

    See this SO question for more info: How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?

    BTW - to find all this out all I did was google the different parts of the 'content' and as usual the Google God provided.