The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS combining pseudo elements, css content and backgrounds

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #40114

    So I know about pseudo elements, I know you can insert content through the css content:”” property, I know you can even place urls to images in the content:”” property and I know you can query html attribute values of the html element the pseudo element was defined on.

    But is it possible to combine all these into one (in other words, can I get the url from a data- attribute, insert it into the content property of a pseudo element and use it as an image)?

    This would be the html:
    <div class=”me” data-image=”img/background.jpg”>… </div>

    This would be the css:
    me:before {content:url(attr(data-image));}

    I’ve tried a couple of things but couldn’t get it to work. Is it simply impossible or am I making a small syntax error somewhere?


    I don’t thing you can do that mostly because I don’t think


    will generate what you think it will.

    My question is…what is it you are trying to achieve?


    Doesn’t the attr selector need to use squared brackets rather than normal ones? e.g:

    content: url(attr[data-image]);

    I may be wrong but heyho worth a try. Make sure you have your display:block and height and widths on the pseudo too.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.