PHP webdeveloper and frontend developer

Generate content with CSS before or after an element

Category : HTML & CSS · by Oct 15th, 2012

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

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

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

 This results in a URL like this on your webpage:

test (“”)


Leave a Reply

Your email address will not be published. Required fields are marked *