9.1 Pseudo-elementos ::before e ::after
Os pseudo-elementos ::before e ::after são ferramentas poderosas no CSS, que permitem adicionar elementos decorativos antes ou depois do conteúdo de elementos sem modificar o HTML. Eles são amplamente usados para criar efeitos visuais, melhorar a interface do usuário e adicionar estilos aos elementos.
Descrição:
::before: pseudo-elemento adicionado antes do conteúdo do elemento::after: pseudo-elemento adicionado após o conteúdo do elemento
Sintaxe:
element::before {
/* estilos para o pseudo-elemento before */
}
element::after {
/* estilos para o pseudo-elemento after */
}
Propriedades principais
Os pseudo-elementos ::before e ::after podem conter quase todas as propriedades CSS, incluindo cor, tamanho, posicionamento, fundo, sombras e etc. No entanto, para que o pseudo-elemento seja visível, ele precisa ter um conteúdo e tamanho definidos.
content: define o conteúdo do pseudo-elemento. Pode ser texto ou imagem, ou ainda uma string vaziadisplay: define o tipo de exibição do pseudo-elemento. Geralmente se usablockouinline-blockposition: controla o posicionamento do pseudo-elemento (por exemplo,absoluteourelative)widtheheight: definem os tamanhos do pseudo-elemento
9.2 Adicionando texto
Com a propriedade content, é fácil adicionar texto no início ou no final de qualquer elemento.
.example::before {
content: "Início: ";
color: blue;
}
.example::after {
content: " :Fim";
color: red;
}
<body>
<p class="example">Este é um exemplo de texto</p>
</body>
Explicação do código:
.example::before: adiciona o texto "Início: " antes do conteúdo do elemento e o colore de azul.example::after: adiciona o texto " :Fim" após o conteúdo do elemento e o colore de vermelho
9.3 Linhas decorativas
Também dá para adicionar linhas decorativas, emoldurando o conteúdo:
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
<body>
<div class="decorative-line">Texto com linhas decorativas</div>
</body>
Explicação do código:
.decorative-line::before: cria uma linha decorativa antes do conteúdo do elemento.decorative-line::after: cria uma linha decorativa após o conteúdo do elemento
9.4 Inserindo ícones
Tá achando pouco? Dá até pra inserir uns ícones:
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<body>
<p class="icon">Texto com ícone</p>
</body>
Explicação do código:
.icon::before: adiciona um ícone antes do texto usando a URL da imagem
9.5 Elementos decorativos complexos
Bora montar algo mais complexo:
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
<body>
<div class="complex-decor">Elemento com canto decorativo</div>
</body>
Explicação do código:
.complex-decor::before: cria um elemento decorativo antes do conteúdo principal, usando gradiente e posicionamento absoluto.complex-decor: define posicionamento relativo para o elemento pai, para que o pseudo-elemento possa ser posicionado relativamente a ele
9.6 Usando animações
Dá até pra colocar uma animaçãozinha:
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
<body>
<div class="animated"></div>
</body>
Explicação do código:
.animated::before: cria um pseudo-elemento quadrado e anima sua rotação usando keyframes
GO TO FULL VERSION