CSS3 :: select selector does not work properly on anchor tags

Question

I am using a CSS3 ::section selector like this

 ::selection{ color:red; background-color:pink; } ::-moz-selection { color:red; background-color:pink; } 

So, when an element is selected, it should change its color to red, and the background to pink.

It works as expected for everything except the Anchor <a> .

When anchor text is selected, it applies the style to the link text, but not to the line below the anchor text.

JSFiddle: http://jsfiddle.net/GcBT2/1/

So how can we apply style to underlining as well?

PS: Browsers tested: chrome 31 and firefox 25.0.1

Answer 1

Please note that for MDN

Only a small subset of CSS properties can be used in a rule using :: select in its selector: color, background, background-color and text-shadow. Note that, in particular, the background image is ignored, like any other property.

The line on your link is part of text-decoration that is not taken into account by the pseudo-selector. It would be best to remove it with

 a{ text-decoration:none; } 

You can also note:

Although this pseudo-element was in draft CSS Selectors Level 3, it was removed during the candidate recommendation phase ( link )

The :: selection pseudo-element is currently not found in any CSS module standard track. It should not be used in production environments.

Additional Information

Answer 2

Bugzilla has an old bug report that relates to your problem. As you can see in comment 26, the selection is actually an additional anonymous element, so the text decoration of the surrounding anchor will not change its color since the selector is used only for this “child”: <span>The word <span::selection>select</span::selection> is selected</span> .