7

Encontro muitos códigos que utilizam estes pseudo-elementos e fico "voando" quando os vejo.

Os poucos tutoriais que achei pela internet não explicaram de forma clara e fiquei com mais dúvidas ainda.

  • Afinal, qual o objetivo/função deles?

2 Respostas 2

5

Eles representam pseudo-elementos, que você não inclui diretamente na sua marcação, mas estão disponíveis para você para criar alguns efeitos interessantes com CSS. Você mencionou ::before ::after, e eles representam pseudo-elementos que aparecem, antes e depois de seus elementos.

A lista completa está incluído abaixo e deve ser bastante auto-explicativo:

::after 
::before 
::first-letter 
::first-line 
::selection

fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Observe o uso dos dois pontos, o que é consistente com a especificação. Às vezes, você vai ver pseudo-elementos especificados com uma unica virgula, mas que foi apenas porque precisávamos para suportar navegadores que não entendem a sintaxe dois pontos duplo.

4

Os pseudo-elementos ::before e ::afterfuncionam da mesma forma e trabalham em parceria com uma propriedade chamada content. A propriedade content serve para inserir conteúdo HTML dinâmico.

::after

.exciting-text::after {
  content: "<- Agora este *é* emocionante!"; 
  color: green;
}

.boring-text::after {
   content: "<- CHATO!";
   color: red;
}
<p class="boring-text">Aqui está um bom e velho texto chato.</p>
<p> Aqui está um texto moderado que não é nem chato nem excitante.</p>
<p class="exciting-text">Contribuir para o MDN é fácil e divertido.
Basta clicar no botão editar para adicionar novas amostras ao vivo ou melhorar amostras existentes.</p>

::before + ::after

q::before { //Inicio
  content: "«";
  color: blue;
}
q::after { //Fim
  content: "»";
  color: red;
}
<q>Algumas citações</q>, ele disse, <q>são melhores do que nenhum</q>.

Funciona como as funções prepend (::before) e append (::after) do JQuery!

Browsers Suportados

inserir a descrição da imagem aqui

Fonte: Pseudo-elementos

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .