Pass :after content attribute with html attribute

css, html

Solution

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

Problem

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)

Original source