[Webkit-unassigned] [Bug 93925] New: :before/:after pseudo elements do not always apply to the proper element

Mon Aug 13 20:26:12 PDT 2012

https://bugs.webkit.org/show_bug.cgi?id=93925

           Summary: :before/:after pseudo elements do not always apply to
                    the proper element
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
        OS/Version: All
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: dylanryan at mac.com

Couldn't think of a more descriptive title, so feel free to rename.

I have several web pages where I use css3 selectors based on <a> element href attributes to add a small icon before links (using :before pseudo-elements) to external sites. However, I have noticed that when multiple links to different sites (which would get different icons) are in the same block-level element, they all get the same icon. The test cast attached uses text instead, which shows the same behavior

The specific code I am using is a style sheet of the following form, but it does the same thing with :after as well as :before.

<code>
a:before{color:black}
a[href^="http://www.google.com"]:before{content:"Google"}
a[href^="http://www.wikipedia.com"]:before{content:"Wikipedia"}
</code>

And then in HTML, I have something like:

<code>
<p><a href="http://www.google.com">Google</a> <a href="http://www.wikipedia.com">Wikipedia</a></p>
</code>

What I expect to see is a link to Google, with the text Google, and the text Google prepended to it from the before (the link will be blue, the before will be in black). Likewise, for the wiki link, it should say Wikipedia twice. 

But what I see instead is that the wikipedia link ALSO has Google prepended to it, even though it does NOT match that style. However, if I wrap all the <a>'s in spans, then they all calculate correctly. Hovering over the links, however, displays the proper text. 

See attached file for test case. Have reproduced in Safari 6 on Lion, Chrome 21.x.x.x on both Lion and Ubuntu, and so I am guessing all platforms/OSs. I am not sure exactly WHEN this regressed, but it never happened to me in whatever the fully updated Safari 5.whatever was on lion (i had it fully updated, so whatever that was before the Safari 6 update). My friend with Chrome on Ubuntu thinks it broke several months ago but he can't be sure exactly when.

Code of the attached file, for those interested in reading it inline:

<code>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    a:hover{color:red}
    a:before{color:black;}
    a[href^="http://www.google.com"]:before{content:"Google"}
    a[href^="http://www.wikipedia.com"]:before{content:"Wikipedia"}
    a[href^="http://www.apple.com"]:before{content:"Apple"}
</style>
<title>Test</title>
</head>
<body>
<p>1: Several links as children of the same p:<br><a href="http://www.google.com">Google</a> <a href="http://www.wikipedia.com">Wikipedia</a> <a href="http://www.apple.com">Apple</a> <a href="http://www.example.com">Example</a></p>
<p>2: Several links wrapped in spans, and the spans are all children of the same p:<br><span><a href="http://www.google.com">Google</a></span> <span><a href="http://www.wikipedia.com">Wikipedia</a></span> <span><a href="http://www.apple.com">Apple</a></span> <span><a href="http://www.example.com">Example</a></span></p>
</body>
</html>

</code>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.