---
title: Descreva pseudo-elementos e discuta para que eles são usados.
---

Um CSS [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) é uma palavra-chave adicionada a um seletor que permite estilizar uma parte específica do(s) elemento(s) selecionado(s). Eles podem ser usados para decoração (`::first-line`, `::first-letter`) ou adicionando elementos à marcação (combinado com `content: ...`) sem ter que modificar a marcação (`:before`, `:after`).

- `::first-line` e `::first-letter` podem ser usados para decorar o texto.
- Usado no truque `.clearfix` conforme mostrado acima, para adicionar um elemento de espaço zero com `clear: both`.
- As setas triangulares em tooltips utilizam `::before` e `::after`. Incentiva a separação de responsabilidades porque o triângulo é considerado parte do estilo e não realmente do DOM.

## Notas

- Pseudo-elementos são diferentes de [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), que são usados para estilizar um elemento baseado em seu _state_ (como `:hover`, `:focus`, etc).
- Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distinção não estava clara nas especificações antigas do W3C.

## Referências

- [Pseudo-elements - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)