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?

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.

Answer 2

add this

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