CSS3 ::selection selector not working properly on anchor tags

Question

I am using the CSS3 ::section Selector like this

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

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

}

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

It works as expected for everything other than the Anchor tag <a>.

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

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

So how can we apply the style to the underline also?

PS: Browsers tested: chrome 31 and firefox 25.0.1

Answer 1

Note that per MDN

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

The line on your link is part of text-decoration which is not taken into consideration by the pseudo selector. Your best bet would perhaps be to remove it using

a{
 text-decoration:none;
}

You may want to also note:

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase (link)

The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.

Further information

Answer 2

There's an old bug report on bugzilla which relates to your problem. As you can see in comment 26 a selection is actually an extra anonymous element, that's why text-decoration of the surrounding anchor won't change its color since the selector only applies for this "child": <span>The word <span::selection>select</span::selection> is selected</span>.