Forums

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
    Posts
  • #40114
    Onderhond
    Member

    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?

    #111160
    Paulie_D
    Member

    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?

    #111161

    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.

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