CSS - content

Description:

The content property defines content to be inserted in generated content operations. This property is used alongwith :before or :after pseudo elements.

Possible Values:

string: Any permitted string value. This is always enclosed in quotation marks.
URI: A pointer to an external resource such as an image.
counter: There are two possible forms of this value: counter(name, style?) and counters(name, string,? style?). In both cases, the content will be the value of the named counter at that point in the document, rendered in the optional style value (decimal by default). In the case of counters(...), the optional string value indicates a string to follow each instance of the named counter.
attr(X): Causes the insertion of the value of attribute X for the selector's subject. For example, it is possible to display the value of the alt attribute of an image using this value.
open-quote: Causes the insertion of the appropriate string specified using the property quotes.
close-quote: Causes the insertion of the appropriate string specified using the property quotes.
no-open-quote: Prevents the insertion of the appropriate string specified using the property quotes. However, the nesting level of the quotation marks is still increased.
no-close-quote: Prevents the insertion of the appropriate string specified using the property quotes. However, the nesting level of the quotation marks is still decreased.

Applies to:

:before and :after pseudo-elements.

DOM Syntax:

object.style.content="url(home.avi)"

Example:

Following is the example which demonstrates how to use :before element to add some content before any element .

<style type="text/css">
p:before
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be preceded by a bullet.</p>

<p> This line will be preceded by a bullet.</p>

<p> This line will be preceded by a bullet.</p>

This will produce following black link:

This line will be preceded by a bullet.

To Become more comfortable - Do Online Practice

Following is the example which demonstrates how to use :after element to add some content after any element .

<style type="text/css">
p:after
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>

This will produce following black link:

This line will be succeeded by a bullet.

To Become more comfortable - Do Online Practice