Menu
I have the following css/html
<!DOCTYPE html>
<html>
<head>
<style>
a[href$=".pdf"]:after{
content: "[pdf]";
}
</style>
</head>
<body>
<p>This is an example <a href="helloworld.pdf">Text with a pdf link</a></p>
<p>This is an example <a href="helloworld.png">Non PDF link</a></p>
</body>
</html>
when I open this in IE8, it works as expected: the PDF link gets text added after, and the PNG does not. When I open it in Chrome 23.0.1271.97 however, both links get [pdf] appended to the end. Even stranger, when I click on the non-pdf link, the [pdf] at the end goes away while clicking, while it does not disappear when clicking on the PDF link.
when I do
a[href$=".pdf"]{
color: red;
}
the pdf link is red while the non-pdf one isn't, even in Chrome.
Why does Chrome seem to not respect the attribute selector when using :after and content?
337
When I have a fiddle with just the :after rule, I see the same issue.
a[href$=".pdf"]:after{
content: "[pdf]";
}
However when I add the rule without :after, the [pdf] is no longer on the bottom one. Strange indeed.
a[href$=".pdf"]:after{
content: "[pdf]";
}
a[href$=".pdf"]{
color: red;
}
It seems like this may be a chrome bug. :before/:after don't work with attribute selectors unless the item is already styled with an attribute selector. Here's the logged bug.
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
