HTML and CSS Reference
In-Depth Information
p:before {
content: url(image.jpg);
}
Notice that the quotes are missing. If you wrapped the URL reference in
quotes, then it would become a literal string and insert the text
“url(image.jpg)” as the content, instead of inserting the image itself.
Naturally, you could include a Data URI in place of the image reference, just
as you can with a CSS background.
You also have the option to include a function in the form of
attr(X)
. This
function, according to the spec, “returns as a string the value of attribute X
for the subject of the selector.”
Here's an example:
a:after {
content: attr(href);
}
What does the
attr()
function do? It takes the value of the specified
attribute and places it as text content to be inserted as a pseudo-element.
The code above would cause the
href
value of every
<a>
element on the
page to be placed immediately after each respective
<a>
element. This
could be used in a print style sheet to include full URLs next to all links when
a document is printed.
You could also use this function to grab the value of an element's
title
attribute, or even micro data values. Of course, not all of these examples
would be practical in and of themselves; but depending on the situation, a
specific attribute value could be practical as a pseudo-element.
