Generate content with CSS before or after an element

You can easily add content before or after an element . To do so the content property is used with the:before and :after pseudo-elements, to insert generated content.It’s  only supposed to work only for the :before and :after pseudo-elements, but only Opera and Konqueror appear to support this. Safari and Chrome support content without the pseudo elements for images, but not for text. And for Internet Explorer, only IE8 supports the content property. For more information on the browser support for this CSS property -> http://www.quirksmode.org/css/contents.html

For example, the following rule inserts the string “Description: ” before the content of every P element whose “class” attribute has the value “descr”:

p.descr:before {
 	content: "Description: " 
}

 The following example inserts the URL in parenthesis after each link:

a:after { 
	content: " (" attr(href) ")"; 
}

 This results in a URL like this on your webpage:

test (“http://www.test.com”)

• HTML & CSS