:after and :before Pseudo Elements
CSS3 supports two new types of pseudo elements called as :before and :after. :after is used to insert a span tag after the content of the selected HTML element, similarly :before is used to insert a span tag before the content.
These psuedo elements only work if you use the css “content” attribute inside them.
Suppose this is the CSS:
{
/*Must use content css property. It can be empty string.*/
content: "";
}
Then we get this HTML
We can apply style properties to the newly added span tag the same way as we style any other span tag is styled.
content Attribute
CSS content attribute can only be used inside these two pusedo elements. It is used to insert content inside the created span tag.
content attribute can take the following values:
- String
- attr() CSS expression
- CSS counter() function
String value for content attribute
We can assign a empty or a non-empty string. If the string contains HTML, CSS or JS code then they will be escaped automatically therefore you cannot put HTML code inside the generated span tag. If you want to display HTML special characters, glyphs etc then their codes will not work instead you have to use CSS codes.
Use the entity conversion calculator to convert HTML codes to CSS codes.
Find complete list of Glyphs and Characters.
attr() CSS expression as value for content attribute
The attr() CSS expression is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can be used on these pseudo-elements too and, in this case, the value of the attribute on the pseudo-element’s originated element is returned. More information on attr().
CSS counter() function as value for content attribute
CSS counters are variables in CSS which can be used to store numbers.
Counters are defined using counter-reset. counter-reset is also used to reset the value of a counter to something else.
They are incremented using counter-increment. counter-increment increments the value whenever the CSS rule is applied to an element.
counter() function returns the counter values to the content property. Therefore counter() can only be used in content attribute value.
Complete information on CSS counter.
Some other values
The above ones are most used values. But content property can also take values like url(url), open-quote, close-quote. url(url) points to a media like image file, audio file or video file. open-quote and close-quote add quotes to the beginning and end respectively.
