OptimusCrime OptimusCrime - 5 months ago 11
CSS Question

How to remove only underline from a:before

I have a set of styled links using the

:before
to apply an arrow.

It looks good in all browser, but when I apply the underline to the link, I don't want to have underline on the
:before
part (the arrow).

See jsfiddle for example: http://jsfiddle.net/r42e5/1/

Is it possible to remove this? The test-style I sat with
#test p a:hover:before
does get applied (according to Firebug), but the underline is still there.

Any way to avoid this?

Answer

Is it possible to remove this?

Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

This is because the CSS specs say:

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

(Emphasis mine.)

Demo: http://jsfiddle.net/r42e5/10/

Thanks to @Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.

Comments