Pseudo-elemento ::before
O pseudo-elemento ::before é utilizado para adicionar conteúdo adicional antes do conteúdo real de um elemento. Similar ao Pseudo-elemento AFTER, o ::before é frequentemente utilizado para inserir elementos decorativos, ícones ou texto sem a necessidade de modificar diretamente o HTML.
Exemplo
Considere o seguinte trecho de código HTML com um título <h1>:
<h1>Título Principal</h1>O código CSS abaixo adicionará conteúdo antes do título:
h1::before {
content: "🌟 ";
color: yellow;
}
Neste exemplo, antes do título “Título Principal”, será adicionado um emoji de estrela amarela.