html - 如何通过悬停摆脱 <a> 标签内 <span> 上的下划线？

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;
}

当您将鼠标悬停在链接上时，下划线将应用于 <span>即使我设置了 text-decoration: none .有办法摆脱它吗？

Answer 1

尝试更改 display的 <span>至 inline-block如下:

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 */
}

解释

根据 CSS level 2 specification , text-decoration不会传播到嵌套原子内联级元素的内容 - 例如内联 block 和内联表。

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.

还有规范说明(我的重点):

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.

另请注意，文本装饰会粘附在文本本身上，因此:

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.