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:

Mozilla: After

Mozilla: Before



Comentários

Postagens mais visitadas deste blog

ANDROID - Criando e Publicando APP com HTML, CSS, JavaScript e Java

Diferenças entre design responsivo, adaptativo e fluído

Despedida SENAC