CODEWITHSUNDEEP
javascripthtmlcsscss-selectorspseudo-class
Mehdi Faraji
Mehdi Faraji

Reputation: 3836

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 ?

Upvotes: 1

Views: 1198

Answers (2)

kazblacktopp
kazblacktopp

Reputation: 79

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.

Upvotes: 1

Md Shafayet Maruf
Md Shafayet Maruf

Reputation: 46

I don't know what actually you want to know. But from your comment in Marcus's answer I am assuming that you want to know that what is happening by this code snippet

Suppose think that we have a paragraph

<p>This is a paragraph</p>

Now if we implement your css on it let's see what happens:

p::before { 
    content: "\E0B3\00FE0E";
    font-size: 16px;
    font-size: 1.143rem;
    line-height: 1.375;
    color: #a1a3a8;
    margin-left: 4px;
}

The output will be like this: [output] https://i.sstatic.net/KFQpY.png

Now lets see what is the responsibility of each line here:

  1. ::"before" - tag means we are doing something before the paragraph
  2. "content" - means we are adding some content before the paragraph in our case which was a icon.
  3. "font-size" - refers that our added content's font size will be 10px and later it changed to 1.143rem ( rem is a mesurement unit ).
  4. "line-height" - refers what will be the distance between two line
  5. "color" - refers icon color.
  6. "margin-left" - referes that we are putting some space in the left side of the icon. In our case which is 4px.

Upvotes: 0

Related Questions