DevGuru CSS2: content

Quick References

Features

Partners

			PROPERTY: content
			content : attr(alt) \| counter(name) \| counter(name, list-style-type) \| counters(name, string) \| counters(name, string, list-style-type) \| no-close-quote \| no-open-quote \| close-quote \| open-quote \| string \| url() Compatibility: N6+ Version: Level 2 Inherited: No The content property is used with the :before and :after psuedo-elements to display content either before or after a specified CSS selector. This content can include strings, quotations marks, URLs, and counters. Simply put, this allows you to repetitiously add text and pictures before and after HTML elements. Note that the content property does not inherit. However, the :before and :after psuedo-elements can inherit any inheritable styles that are in effect, or you can specify various CSS properties to effect the appearance of the content. :after The :after psuedo-element dictates that the content is to be added after the element specified by the selector. The colon is mandatory. Syntax: selector:after { ... }. :before The :before psuedo-element dictates that the content is to be added before the element specified by the selector. The colon is mandatory. Syntax: selector:before { ... }. The content property has eleven possible values. attr(alt) The attr value inserts the text of the alt argument as content. counter(name) The counter value inserts the named counter as content. counter(name, list-style-type) The counter value inserts the named counter as content rendered in the specified list-style-type. counters(name, string) The counters value inserts all named counters as content. counters(name, string, list-style-type) The counters value inserts all named counters as content rendered in the specified list-style-type. close-quote The close-quote value inserts the closing quotation values specified by the nesting level of the quotes property. no-close-quote The no-close-quote value does not insert a closing quotation mark, but it does increment the nesting level of the quotes property. no-open-quote The no-open-quote value does not insert an opening quotation mark, but it does increment the nesting level of the quotes property. open-quote The open-quote value inserts the opening quotation values specified by the nesting level of the quotes property. string The string value is a string or text enclosed within a pair of quotes. url( ) The url value is a URL address enclosed within a pair of quotes. This example adds opening and closing quotes. Code: <html> <head> <title>content test</title> <style type="text/css"> p:before {content: open-quote;} p:after {content: close-quote;} </style> </head> <body> <p>DevGuru is the best reference source on the web.</p> </body> </html> Simulated output, however, this code example works on Netscape 6+. Output: "DevGuru is the best reference source on the web."