before e after no css

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

Diogo Neves

Curtidas 0

Melhor post

Marcelo Santana

Marcelo Santana

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!


GOSTEI 1

Mais Respostas

Diogo Neves

Diogo Neves

30/11/2017

Muitíssimo obrigado Marcelo! Exatamente essa parada aí :)
GOSTEI 0
POSTAR