Grow your CSS skills. Land your dream job.

combining pseudo elements, css content and backgrounds

  • # October 2, 2012 at 12:02 pm

    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?

    # October 2, 2012 at 12:22 pm

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

    data-image=”img/background.jpg”

    will generate what you think it will.

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

    # October 2, 2012 at 12:22 pm

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

    .me:before{
    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".