CSS - Content (Property)
Table of Contents
1 - About
2 - Articles Related
3 - Rendering
4 - Property
The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element.
5 - Example
5.1 - Pseudo-element
p::before{
content: "What ever ... ";
display: inline;
border:1px solid aqua;
}
where:
<p>This text will have "What ever" at its beginning</p>
We can see with the aqua border that an element (a pseudo-element) is added at the beginning.
5.2 - With the attr function
With the attr function, you can show data attribute in the content.
<p data-length="2m" >Beyond The Sea</p>
p::before {
content: attr(data-length) " ";
}