How to get rid of underline on <span> inside <a> tag with hover?

Question

fiddle

HTML

<ul>
    <li><a href="#">Messages<span>1</span></a></li>
</ul>

CSS

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:hover span {
    text-decoration: none;
}

span {
    background-color: red;
    border-radius: 999px;
    color: white;
    margin-left: 2px;
    position: relative;
    top: -.5em;
    font-size: .75em;
    font-weight: bold;
    padding: 0 .3em;
}

When you mouse-over the link the underline is applied to the <span> even though I've set text-decoration: none. Is there a way to get rid of it?

Protoplasm

Answer 1

Try changing the display of <span> to inline-block as follows:

Example Here

span {
    background-color: red;
    border-radius: 999px;
    color: white;
    margin-left: 2px;
    position: relative;
    top: -.5em;
    font-size: .75em;
    font-weight: bold;
    padding: 0 .3em;
    display: inline-block; /* <-- Added declaration */
}

Explanation

According to CSS level 2 specification, text-decoration is not propagated to the contents of nested atomic inline-level elements - such as inline-blocks and inline-tables.

16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property

[...] 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.

Also the spec states (my emphasis):

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped. User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.

Also note that text decorations would stick with the text itself, therefore:

Relatively positioning a descendant moves all text decorations affecting it along with the descendant's text; it does not affect calculation of the decoration's initial position on that line.

Cw

@DavidThomas This is because text-decoration is not applied to contents of nested inline-blocks. The CSS2 spec states: 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. – Cw

Thanks, though I'm still surprised; I had assumed that the underline wasn't 'applied to' the descendant, but merely extended beneath the descendant. – Viral

@DavidThomas It is not extended even by default because according to the spec: Underlines, overlines, and line-throughs are applied only to text [...] margins, borders, and padding are skipped and also Relatively positioning a descendant moves all text decorations affecting it along with the descendant's text. – Cw

Thx for the explanation, I wasn't aware of that either +1! (why not edit that explanation in the answer itself as it doesn't seem to be obvious?) – Cicala

@Cicala Thanks. Just revised the answer. – Cw

Answer 2

add this

ul li a span { text-decoration:none; display: inline-block; } 

Intricacy