Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Why is it impossible to change content in css?

Why is it impossible to change content in css?

Problem

CSS2.1 pseudo-selectors such as ::after and ::before allows to add text content to the page. For example :

CSS

 p:after { content:' Batman!' }

HTML

Na Na Na Na Na Na

Output in the browser

Na Na Na Na Na Na Batman!

My question, with the same HTML source, is why this piece of CSS

 p { content:'My hero is' }
 p:after { content:' Batman!' }

doesn't outputs this

My hero is Batman!

but instead outputs this ?

Na Na Na Na Na Na Batman!

The w3c spec on the content property : http://www.w3.org/TR/CSS21/generate.html#propdef-content


Answer - I was looking at the CSS2.1 spec. The CSS3 spec indicates it is possible even without ::after and ::before pseudo-selectors. But not every browser implements it.

  • Chrome 20.0.1132.57 : NO
  • Opera 12.00 r1467 : YES
  • Safari 5.1.7 (7534.57.2) : NO
  • IE 8.0.7601 : NO (the CSS2 content property is not even implemented)
Problem courtesy of: Marcel Falliere

Solution

The CSS 2.1 spec cited says: “Applies to: :before and :after pseudo-elements”. This restriction has been relaxed in the draft for CSS3 Generated and Replaced Content Module, which is old (2003) and outdated but still partly implemented. Opera seems to support content for normal elements, except for the use of URL values (used to insert images), whereas Chrome and Safari do the same only for URL values. So you code actually works on Safari.

More widespread support is not very likely unless specification work on the module makes some progress. On the W3C CSS module status page, the module is in the “Rewriting” section, with the note “Severely outdated”.

Solution courtesy of: Jukka K. Korpela

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Why is it impossible to change content in css?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×