Pseudo-elemento CSS ::before
Use o pseudo-elemento CSS ::before para adicionar elementos antes do conteúdo. Saiba mais sobre o pseudo-elemento e experimente os exemplos.
O pseudo-elemento ::before é um elemento de conteúdo gerado que insere qualquer tipo de conteúdo antes do conteúdo de um elemento. Pode ser utilizado para inserir caracteres, cadeias de texto e imagens. O valor é definido pela propriedade content.
Por predefinição, o pseudo-elemento ::before é inline.
Este pseudo-elemento pode ser animado, posicionado ou colocado em float como qualquer outro conteúdo.
O pseudo-elemento ::before também pode ser utilizado com a notação de dois-pontos simples :before, que é suportada por todos os browsers.
O pseudo-elemento ::after adiciona conteúdo depois de qualquer outro conteúdo, ao passo que o pseudo-elemento ::before adiciona conteúdo antes de qualquer outro conteúdo em HTML.
Versão
Sintaxe
Pseudo-elemento CSS ::before
::before {
css declarations;
}Exemplo do pseudo-elemento ::before:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: " William Shakespeare -";
}
</style>
</head>
<body>
<h2>::before selector example</h2>
<p>"Be or not to be".</p>
</body>
</html>No exemplo seguinte, o utilizador pode adicionar estilos ao conteúdo.
Exemplo do pseudo-elemento ::before com conteúdo estilizado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "William Shakespeare-";
display: inline-block;
background-color: #ccc;
color: #666;
border: 2px dotted #000;
}
</style>
</head>
<body>
<h2>::before selector example</h2>
<p>"Be or not to be".</p>
</body>
</html>Para pseudo-elementos puramente decorativos, defina sempre content: '' para garantir que são renderizados corretamente em todos os browsers.