#content
Defines the text content of the :before and :after pseudo-elements.
default
content: normal;
No content is added to the element.
content: "Foo bar";
Considering this HTML element:
<p class="element"> Hello world </p>
And this CSS:
.element:before {
content: "Foo bar";
}The text content will be prepended to the element's content.
Notice how the end result combines text from the HTML and text from the CSS.
content: url(/images/jt.png);
You can insert images by using the url() function.
content: attr(data-something);
Considering this HTML element:
<p class="element" data-something="cssreference"> Hello world </p>
And this CSS:
.element:before {
content: attr(data-something);
}The element will grab the text content from the HTML attribute.