Artigos CSS CSS: Conheça os pseudo-elementos

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;
}

Run
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;
}

Run

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;
}

Run

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;
}
;

Run

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;
  }

Run

Para aprofundar seus estudos sobre CSS: