CSS attribute selector + after: Not Working in Chrome?
Question
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?
2 answers
solution1
5 ACCPTED 2013-01-14 19:51:33
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 .
solution2
1 2013-01-14 19:57:44
It definitely seems to be a bug. I does seem, however, that one work around is to set something using the base selector, then set the after. So for instance, this works :
a[href$=".pdf"] {
font-size: inherit;
}
a[href$=".pdf"]:after {
content: "[pdf]";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.