I have used the content attribute for a long time, and today I wanted to try something new. Instead of using JS to display a image tooltip I wanted to know if it was possible to do it dynamically with CSS.
So I tried:
It's neither a bug nor a mistake. The currently supported syntax (CSS2.1) for content is:
content: normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Or any number of these in succession:
The specs don't allow for them to be "nested", they can only follow each other, e.g.:
content: "Photo: " url("../Img/Photo.jpg") attr(id); /* Which is not what you want */
The current CSS3 drafts don't allow for it either. Possibly - if it's been discussed - because most use cases would have little to do with presentation and more to do with actual content.