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