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”)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s