Pseudoelementos

Novamente encontramos o prefixo pseudo invadindo a praia do HTML e CSS.

Se você já leu um artigo sobre seletores, já deve estar ciente do significado de “pseudo”. Mas caso não tenha visto, “Pseudo” é um prefixo utilizado na língua portuguesa para indicar um teor falso cujo conteúdo não é real ou verdadeiro.

Neste caso (dos elementos), o significado cai muito bem, pois o elmento criado não é bem um elemento, portanto, podemos dizer que é um falso elemento.

E porque digo isto ? Porque você não poderá utilizar todas as propriedades de estilização, algumas funcionarão e outras não. Eu deixei, abaixo de cada item, o link para a documentação. Nela você encontrará os detalhes de cada pesudoelemento.

: ou ::

Os dois pontos dobrados (::) foram criado na CSS3 para diferenciar os pseudoelementos das pseudoclasses.

Se o objetivo for estar atualizado com a CSS3, então utilize ::.

Se o objetivo for manter a compatibilidade com navegadores antigos, então utilize :.

::first-line

Aplica estilos a primeira linha dos elemento block-level.

p::first-line {
  color: red;
}

Veja uma demo.

Fonte mozilla.org/docs/Web/CSS/::first-line

::first-letter

Aplica estilos a primeira letra dos elemento block-level.

p::first-letter {
    color: red;
    font-size: 200%;
}

Veja uma demo.

Fonte mozilla.org/docs/Web/CSS/::first-letter

::after

Cria um pseudo-elemento que é o último filho do elemento selecionado. É frequentemente utilizado para adicionar conteúdo decorativo à um elemento utilizando a propriedade content. Este elemento é inline por padrão.

.exciting-text::after {
    content: "<- now this *is* exciting!";
    color: green;
}
.boring-text::after {
    content: "<- BORING!";
    color: red;
}

Veja uma demo.

Mas veja também o artigo content para maiores informações e exemplos.

Fonte mozilla.org/docs/Web/CSS/::after

::before

Cria um pseudo-elemento que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um elemento utilizando a propriedade content. Este elemento é inline por padrão.

.ribbon {
    background-color: #5BC8F7;
}
.ribbon::before {
    content: "Look at this orange box. ";
    background-color: #FFBA10;
}

Veja uma demo.

Mas veja também o artigo content para maiores informações e exemplos.

Fonte mozilla.org/docs/Web/CSS/::before

::selection

Utilizado para selecionar o conteúdo de um elemento.

::selection {
  background: red;
}
p::selection {
  background: blue;
}

Veja uma demo.

Fonte mozilla.org/docs/Web/CSS/::selection

Veja a lista completa dos pseudoelementos

Tabular…

Ajudenos a completar essa lista!!!