Como utilizar after e before do CSS
Neste post vamos ver como utilizar os pseudo-elements ::after e ::before para estilizar o seu site sem a necessidade de adicionar novas tags no HTML.
::after (:after)
Cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade content. É inline por padrão.
::before (:before)
Cria um pseudo-elemento que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade content. Este elemento é inline por padrão.
Digamos que você tem o seguinte HTML:
<a href="#">Link</a>
E nós adicionamos a seguinte classe:
a::after {
content: "→";
}
Resultado: Link→
Agora se removermos a classe anterior e fizermos assim:
a::before {
content: "«";
}
Resultado: «Link
Deseja ver mais, acesse:
Comentários
Postar um comentário