19 lines
1.4 KiB
Plaintext
19 lines
1.4 KiB
Plaintext
---
|
|
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)
|