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?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEles 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.
Os pseudo-elementos ::before e ::after
funcionam da mesma forma e trabalham em parceria com uma propriedade chamada content
. A propriedade content
serve para inserir conteúdo HTML dinâmico.
.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>
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
!
Fonte: Pseudo-elementos