3

I have a number of div's, each needing a different content attribute in the :after element. It is not possible for me to style each div individually, because the amount of div's is rather large.

My question: Can I pass the attribute in the html tag itself? Say I have

<a href="#" class="vak">Engels</a>

With an :after styling like 

content: "this needs to change";
display: inline-block;
color: #A9B0BB;  
float: right;
font-style:italic;

How can I pass on the this needs to change string in html? Is there a better way to do this? (preferably without using js)

Improve this question
1
  • You want a variable content? Commented Jul 8, 2014 at 19:58

1 Answer 1

Reset to default
11

You could use an attribute for it:

<a title="this will be displayed in the :after">test</a>

CSS:

a:after {
    content: attr(title);
    display: inline-block;
    color: #A9B0BB;  
    float: right;
    font-style: italic;
}

Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Works like a charm, didn't know css offered this functionality!
attr() is not supported in any of the major browsers. I've no idea how this could work for you.
Hmm.. Things seem to conflict with each other. caniuse.com/#feat=css3-attr seems to say it doesn't work for any browser, however developer.mozilla.org/en/docs/Web/CSS/attr says something different and so does my Fiddle. If you try that, it should work.
The Mozilla developer page's browser compatibility section also says that no browsers currently support this (which is a shame). I tested the most recent versions of Chrome & Firefox, but had no success.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.