Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

239
Visualizações
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 ?

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

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.

about 4 years ago · Juan Pablo Isaza Relatório

0

You modify it via normal CSS if that is what you are asking.

about 4 years ago · Juan Pablo Isaza Relatório

0

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.stack.imgur.com/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.
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda