How to mix url string & attribute value in CSS content property?

Question

I need to show image corresponding to each item beside it, using CSS content property & :before pseudo selector.

How do I do something like below in a valid working way:

content: url("http://example.com/images/" + attr(title));

to show an image at URL

 "http://example.com/images/523452345"

The above does not work!

Answer 1

It's not possible to do that, this is the specification, you can't place attr() inside url(), they can only follow each other.

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit


div:before {
    content: url("http://example.com/image.jpg") attr(title);
}