Css Content, Attr and Url in the same sentence

Question

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:

.TableLine:hover:after{
  content: url("../Img/Photo/"attr(id)".jpg"); 
}

where attr(id) is supposed to return the ID of the picture (alphanumeric) which is also the name of the picture.

It doesn't work at all, it has no effect. I think that the block did not parse because adding a border or background to the block also seems to have no effect.

When I just use the attr(id) alone, without the url thing, it works perfectly. It also works when I replace attr(id) with the real name of the picture.

After searching a while on the web I haven't found anything relevant so here I am. Is that a known bug or just my mistake? :)

Answer 1

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

I.e.:

• The literal normal, none or inherit

• Or any number of these in succession:

  • a string - "hello"
  • a (constant) URI - url("image.jpg")
  • a counter - counter(section)
  • an attribute - attr(id)
  • open-quote, close-quote, no-open-quote, no-close-quote

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.

Answer 2

As of W3C Candidate Recommendation 28 August 2012, there is syntax for specifying the type returned by attr().

It is described here.

Long story short, the following would work:

content: attr(id url);

But it still doesn't seem like you would be able to concatenate that with other strings, which is annoying.

Anyhow, this still doesn't seem to be implemented anywhere.

Check Browser compatibility