Os pseudo-elementos nos permitem selecionar algumas áreas internas de um elemento HTML e customizá-las através de propriedades. Selecionar a área que antecede o conteúdo de um elemento adicionando a ela texto ou imagens, ou estilizar apenas a primeira linha de um elemento de texto são apenas algumas das possibilidades criadas por esse recurso.
Saiba mais: CSS Tutorial
Neste documento falaremos sobre todos os pseudo-elementos do CSS: ::first-line, ::first-letter, ::before, ::after e ::selection.
Sintaxe
Para utilizar um pseudo-elemento basta declarar o seletor seguido pelo pseudo-elemento desejado. Logo após, da mesma forma que é feito com qualquer regra CSS, podemos definir as propriedades a ele relacionadas.
Sintaxe de declaração de um pseudo-elemento:
[seletor]::pseudo-elemento { propriedade : valor; }
::first-line
O pseudo-elemento ::first-line é utilizado quando desejamos customizar o conteúdo apresentado na primeira linha de um elemento. Assim, podemos estilizar esse fragmento de texto de forma independente, aplicando, por exemplo, um tamanho de fonte diferente.
Exemplo de uso:
p::first-line {
font-size: 16px;
}
Nota: É importante ressaltar que não há uma maneira trivial de definir até onde o texto será estilizado, principalmente quando lidamos com páginas responsivas. Ao redimensionar uma página, a primeira linha pode se tornar maior ou menor, e isso também depende de outros fatores, como o tamanho da fonte, espaçamento entre palavras, entre outros.
::first-letter
O pseudo-elemento ::first-letter nos permite selecionar a primeira letra do conteúdo de um elemento. Usamos esse recurso quando desejamos destacar essa letra alterando seu tamanho e sua cor, por exemplo.
Exemplo de uso:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
p::first-letter {
color: red;
font-size: 32px;
}
Em alguns casos esse recurso pode identificar que algum caractere deve ser selecionado junto com a primeira letra, como quando temos aspas no início do texto.
Quando isso acontece, tanto as aspas duplas quanto a primeira letra serão selecionadas e estilizadas. Essa característica se deve ao fato de ::first-letter tentar se adequar às particularidades da escrita de cada idioma.
::before
A declaração do pseudo-elemento ::before em um seletor cria um falso elemento que nos permite adicionar conteúdo antes do conteúdo do elemento selecionado.
Exemplo de uso:
<div>
Texto dentro do elemento.
</div>
div::before {
content: “pseudo-elemento ::before”;
color: blue;
}Nesse exemplo o texto “pseudo-elemento ::before” será apresentado antes do conteúdo “Texto dentro do elemento” e na cor azul. Para isso declaramos as propriedades content e color como regras do pseudo-elemento.
::after
Assim como ::before, o pseudo-elemento ::after também cria um falso elemento que nos permite adicionar conteúdo ao elemento selecionado, mas desta vez no final dele.
Exemplo de uso:
<div>
Texto dentro do elemento.
</div>
div::after {
content: "pseudo-elemento ::after";
color: red;
}
; Nesse exemplo usamos o ::after para acrescentar uma frase após o conteúdo já presente no elemento <div>.
::selection
O pseudo-elemento ::selection é utilizado para selecionar o conteúdo de um elemento e, a partir disso, customizar algumas propriedades dessa área, como a cor de fundo e do texto.
Exemplo de uso:
p::selection {
color: red;
}Nesse caso, todo texto declarado nos elementos <p> de uma página HTML terá a cor vermelha.
Nota: É importante ressaltar que apenas um pequeno conjunto de propriedades do CSS pode ser utilizado com esse pseudo-elemento. Entre essas propriedades podemos destacar: color, background-color, cursor e text-decoration. Em alguns navegadores ainda podemos utilizar: outline e text-shadow. Quando uma propriedade não puder ser renderizada ela será ignorada.Exemplo prático
É comum encontrarmos citações em artigos com o objetivo de enriquecer o texto com informações de outros autores. Nestes casos, para destacar esse conteúdo externo normalmente aumentamos o tamanho da fonte utilizada nas aspas duplas que o precedem.
Para obter esse resultado podemos utilizar o pseudo-elemento ::before, como apresentado no código abaixo:
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</blockquote>
blockquote {
display: inline;
}
blockquote::before {
content: open-quote;
font-size: 4em;
line-height: 0.1em;
vertical-align: -0.35em;
}