It is a facility to insert content into a page using CSS and the content is not part of the page hence, not accessible by screen readers which read out the content of pages for visually handicapped. All browsers except IE 6 support it.
It specifies generated content that can be displayed before or after an element and is used in conjunction with the :before and :after pseudo-elements. It’s values are discussed as
| Value | Description |
| none | Sets the content, if specified, to nothing |
| normal | Sets the content, if specified, to normal, which default is “none” |
| counter | Sets the content as a counter |
| attr(attribute) | Sets the content as one of the selector’s attribute |
| string | Sets the content to the text you specify |
| open-quote | Sets the content to be an opening quote |
| close-quote | Sets the content to be a closing quote |
| no-open-quote | Removes the opening quote from then content, if specified |
| no-close-quote | Removes the closing quote from then content, if specified |
| url(url) | Sets the content to media like image, sound, video, etc. |
The content property is used as
p:before { content: url(images/quote.gif); }
p:after { content: close-quote; }
li:before { content: “>>”; }
This property is used when printing web pages to print the URL of the links on a webpage as in printing web pages by default, the URLs of links are not printed.
