Os pseudo-elementos são, assim como as pseudo-classes, utilizados para dar efeito visual aos elementos (x)html e possui sua sintaxe exatamente igual as pseudo-classes: seletor:pseudo-elemento {propriedade: valor}.
Entre os pseudo-elementos existentes, irei destacar alguns explicando o seu uso.
:first-line
Utilizado para criar efeitos visuais na primeira linha de um elemento (x)html, este pseudo-elemento só pode ser utilizado em elementos a nÃvel de bloco.
p:first-line {color:#f00}
<p>GustavoRibeiro.net - Tableless, Acessibilidade e SEO</p>Abaixo o resultado do uso do :first-line lembrando que, a formatação é feita de acordo com a renderização no browser. No exemplo abaixo, simulo um paragrafo com uma quebra de linha devido ao seu tamanho ser menor que o tamanho do texto nele escrito.
GustavoRibeiro.net -
Tableless, Acessibilidade e SEO
:first-letter
Utilizado para criar efeitos visuais na primeira linha de um elemento (x)html e, também, só pode ser utilizado em elementos de nÃvel de bloco.
p:first-letter {font-size:20px;color:#f00}
<p>GustavoRibeiro.net - Tableless, Acessibilidade e SEO</p>GustavoRibeiro.net -
Tableless, Acessibilidade e SEO:before
Adiciona qualquer conte̼do Рsom, texto, imagem Рantes de qualquer conte̼do de um certo elemento.
p:before {content:'GustavoRibeiro.net - '}
<p>Tableless, Acessibilidade e SEO</p>GustavoRibeiro.net - Tableless, Acessibilidade e SEO:after
Identico ao :before, porém, o conteúdo é adicionado depois de qualquer conteúdo de um certo elemento.
p:before {content:' - Tableless, Acessibilidade e SEO'}
<p>GustavoRibeiro.net</p>GustavoRibeiro.net - Tableless, Acessibilidade e SEO
