- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
data-image=”img/background.jpg”
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:
.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.
This is just out which might help.