Seletores de Pseudoelemento: Estilizando partes de um elemento

Entenda como estilizar partes específicas de um elemento, como a primeira letra de um parágrafo.

Você já aprendeu a estilizar elementos inteiros com base em seu tipo, classe, ID, atributos e até mesmo em seus estados ou posições. Mas e se você quiser estilizar apenas uma parte de um elemento? Por exemplo, a primeira letra de um parágrafo, ou a primeira linha de um texto? Ou talvez adicionar um ícone antes ou depois de um conteúdo sem precisar mexer no HTML?

É para isso que servem os Seletores de Pseudoelemento. Eles permitem que você selecione e estilize uma parte específica de um elemento, ou até mesmo conteúdo gerado que não existe diretamente no HTML.

Pense nos pseudoelementos como "sub-elementos" ou "partes invisíveis" que o CSS pode criar ou acessar dentro de um elemento existente.

Como funcionam os Pseudoelementos

Os pseudoelementos são indicados por dois pontos duplos (::) seguidos do nome do pseudoelemento. Eles são adicionados a um seletor existente.

Sintaxe:

seletor::pseudoelemento {
  propriedade: valor;
}

Nota: Embora a sintaxe com dois pontos duplos (::) seja a recomendada para pseudoelementos (para diferenciá-los das pseudoclasses), a sintaxe com um único ponto (:) ainda funciona para compatibilidade com navegadores mais antigos. No entanto, é uma boa prática usar ::.

Vamos explorar os pseudoelementos mais comuns:

1. ::first-line

Seleciona e estiliza a primeira linha de um bloco de texto. O comprimento da "primeira linha" depende da largura do elemento e do tamanho da fonte.

  • Exemplo:

    <p>Este é um parágrafo de exemplo para demonstrar o pseudoelemento ::first-line. A primeira linha deste texto será estilizada de forma diferente.</p>

    p::first-line {
  font-weight: bold;
  color: blue;
  text-transform: uppercase;
}

    Resultado: A primeira linha visível do parágrafo ficará em negrito, azul e em maiúsculas. Se a janela do navegador for redimensionada, a "primeira linha" pode mudar, e o estilo se adaptará.

2. ::first-letter

Seleciona e estiliza a primeira letra de um bloco de texto. É frequentemente usado para criar um efeito de "letra capitular" (drop cap), comum em livros e revistas.

  • Exemplo:

    <p>Era uma vez, em um reino distante, uma princesa que adorava CSS.</p>

    p::first-letter {
  font-size: 3em; /* 3 vezes o tamanho da fonte normal */
  color: red;
  float: left; /* Faz a letra flutuar para a esquerda */
  margin-right: 5px;
}

    Resultado: A primeira letra 'E' do parágrafo ficará grande, vermelha e flutuará à esquerda, criando um efeito de capitular.

3. ::before e ::after (Conteúdo Gerado)

Estes são os pseudoelementos mais poderosos e versáteis. Eles permitem que você insira conteúdo (texto, ícones, formas) antes (::before) ou depois (::after) do conteúdo real de um elemento, sem precisar adicionar nada ao HTML.

Importante: Para que ::before e ::after funcionem, eles precisam da propriedade content.

  • Exemplo: Adicionar um ícone antes de links externos.

    <a href="https://www.google.com" target="_blank">Visitar Google</a>
<a href="/contato">Fale Conosco</a>

    a[target="_blank"]::before {
  content: "🔗 "; /* Adiciona um ícone de link antes do texto */
  font-size: 0.8em;
  margin-right: 5px;
}

    Resultado: Apenas o link "Visitar Google" terá um ícone de corrente 🔗 antes do texto, pois ele possui o atributo target="_blank".

  • Exemplo: Adicionar aspas decorativas.

    <blockquote>Uma citação inspiradora.</blockquote>

    blockquote::before {
  content: "“"; /* Aspas de abertura */
  font-size: 3em;
  color: #ccc;
  line-height: 0.1;
  vertical-align: -0.4em;
  margin-right: 5px;
}

blockquote::after {
  content: "”"; /* Aspas de fechamento */
  font-size: 3em;
  color: #ccc;
  line-height: 0.1;
  vertical-align: -0.4em;
  margin-left: 5px;
}

    Resultado: O bloco de citação terá aspas grandes e decorativas antes e depois do texto.

4. ::selection

Estiliza a parte do documento que o usuário selecionou (arrastando o mouse sobre o texto).

  • Exemplo:

    <p>Tente selecionar este texto com o mouse.</p>

    ::selection {
  background-color: yellow;
  color: black;
}

    Resultado: Quando o usuário selecionar o texto do parágrafo, o fundo da seleção ficará amarelo e o texto preto.

5. ::placeholder

Estiliza o texto de placeholder em campos de formulário (<input>, <textarea>).

  • Exemplo:

    <input type="text" placeholder="Digite seu nome...">

    input::placeholder {
  color: gray;
  font-style: italic;
}

    Resultado: O texto "Digite seu nome..." dentro do campo de input ficará cinza e em itálico.

Quando usar Pseudoelementos?

  • Para estilizar partes específicas de um texto (primeira letra, primeira linha).
  • Para adicionar conteúdo puramente decorativo ou informativo (ícones, aspas, marcadores) que não faz parte do conteúdo semântico do HTML.
  • Para estilizar a seleção de texto ou placeholders de formulário.

Os pseudoelementos são uma forma elegante e eficiente de adicionar detalhes visuais e aprimorar a experiência do usuário sem poluir o seu HTML com elementos extras. Eles mantêm a separação de preocupações, deixando o HTML focado no conteúdo e o CSS focado na apresentação.