before e after no css

30/11/2017

Algu�m pode me explicar em quais situa��es eu poderia usar o before e o after no css?

N�o consegui entender mesmo vendo a documenta��o.

Diogo Neves

Curtir t�pico + 0

Responder

Post mais votado

01/12/2017

Boa dia, Diogo. :)

Eles servem para voc� lan�ar algo antes (::before) ou depois (::after), e estiliza-lo da maneira que desejar, colocando imagem de background , font-icon e etc.. O uso � simples..
Veja abaixo:


<!DOCTYPE html>
<html>
<head>
<style>
#after::after { 
    content: " - Importante! ";
    color: red;
    background-color: yellow;    
}

#before::before { 
    content: " - Fique atento! ";
    color: white;
    background-color: blue;    
}

</style>
</head>
<body>
	<p id="after">Tenho que pagar conta (after - lan�a o texto ap�s o texto da tag informada )</p>
	<p id="before"> Lan�a conteudo antes </p>
</body>
</html>

Voc� pode usar outras propriedades do css, observe que � atrav�s da propriedade "content" que � lan�ado o conte�do na tela.

Abra�o!

Marcelo Santana

Responder

Gostei + 1

Mais Posts

21/12/2017

Diogo Neves

Muit�ssimo obrigado Marcelo! Exatamente essa parada a� :)

Responder

Gostei + 0