CODEWITHSUNDEEP
csspseudo-elementcss-content
Ryan Saxe
Ryan Saxe

Reputation: 17829

attr(x) not working in CSS

So I would like to use pre tags in a documentation web page. Now, I want the correct language to be in the top right corner. So This is what I thought I could do:

<pre class="code" language="Python"></pre>

then I could use after and attr(X) in CSS to fill the psuedo after with the content of language:

pre.code:after{
    content: attr("language");
    position:absolute;
    right:0;
    top:0;
}

But this is not doing anything!

if I change attr("language") to "Python" it works...why does attr(X) not work here?

jsfiddle

Upvotes: 2

Views: 2362

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240858

Don't include quotations within the attr() expression.

Use attr(language) as opposed to attr("language").

UPDATED EXAMPLE HERE - your code now works with that minor correction.

pre.code:after {
    content: attr(language);
}

See @BoltClock's comments below for details as to why quotations aren't suppose to be used.

Upvotes: 4

Related Questions