CODEWITHSUNDEEP
htmlcss
Razvan
Razvan

Reputation: 49

How can I put a style to content before or after?

I want to make for a client a button with :after and :before selector. And the text from :before content: "" is basic.

div:after {"E-mail"} and div:hover:after {"[email protected]"}

How cand I design content text like normal text?

enter image description here

Upvotes: 0

Views: 973

Answers (2)

Ben Philipp
Ben Philipp

Reputation: 1877

Usually, the pseudo-element will inherit the parent style. However, you can specifically style the pseudo-element just like any other, if needed:

See my Example explaining the relationships:

https://jsfiddle.net/svArtist/L9v24xwx/

div.styleme{
color:#f00;
font-size: 14pt;
font-family: Arial, sans-serif;
}

div span{
color:#00f;
font-size: 14pt;
font-family: Arial, sans-serif;
}

div:after{
content: "E-mail";
}

#defined:after{
color:#0f0;
font-size: 14pt;
font-family: Arial, sans-serif;
}
<div class="styleme">Pseudo Element inheriting Style</div>
<div><span>Style only applied to &lt;SPAN&gt; tag</span></div>
<div id="defined">Style explicitly (re-)defined for Pseudo Element</div>

Upvotes: 1

odedta
odedta

Reputation: 2478

div:after { 
    content: "E-mail";
} 

div:hover:after {
    content: "[email protected]";
}
<div></div>

There you go, please refer to http://www.w3schools.com/cssref/sel_after.asp for learning how to use :after selector.

Upvotes: 0

Related Questions