CSS content PropertyS2C Home « CSS content Property
Definition
The CSS content property is used to generate content in a document in conjunction with the :before and :after pseudo-elements.
Applies To
:before and :after pseudo-elements.
Property Values
attr(attribute) - Sets the generated content to a string containing the value of the attribute.
close-quote - Sets the generated content to a closing quote.
counter(counter) - Sets the generated content to the number held within the counter.
inherit - The content properties are inherited from the parent element.
no-close-quote - Removes generated content for a closing quote.
no-open-quote - Removes generated content for an opening quote.
none - Any specified content is not generated.
normal - Resolves to the none value so content is not generated.
open-quote - Sets the generated content to an opening quote.
string - Sets the generated content to the value of the specified string.
url(url) - Sets the generated content to the contents of the media type specified in the url path.
Default Value
Default value is set to normal.
Inheritance
The content property is NOT inherited from the parent element.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS content property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS content Property</title>
<!-- Valid values for CSS content Property are:
attr, close-quote, counter, inherit, no-close-quote, no-open-quote,
none, normal, open-quote and url.
-->
<style type="text/css">
/* content set to the value held within the href attribute */
a:after {
content: attr(href);
}
/* content set to a string */
.para1:after {
content: "AN INSERTED STRING ";
}
/* content will have opening quote */
.para2:before {
content: open-quote;
}
</style>
</head>
<body>
<h1>The CSS content Property</h1>
<h2>Content generated after a link</h2>
<p>A link
<a href="https://server2client.com/images/beefalepiesmall.jpg"></a>
</p>
<h2>Content generated after a paragraph</h2>
<p class="para1">
Content generated after this sentence.
</p>
<h2>Opening quote generated</h2>
<p class="para2">
Notice the generated opening quote.
</p>
</body>
</html>
How It Looks
The results of using the content property with the values above will look something like the following:
Homepage
Top