如何使用悬停删除<span>内<a>标签下划线？

Question

小提琴

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如下:

这里的例子

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级别2规范,text-decoration不会传播到嵌套的原子内联级元素的内容 - 例如内联块和内联表.

16.3.1下划线,上划线,打击和闪烁:"文字装饰"属性

[...]请注意,文本修饰不会传播到浮动和绝对定位的后代,也不会传播到原子内联级后代(如内联块和内联表)的内容.

规范还指出(我的重点):

下划线,上划线和直通仅应用于文本 (包括空格,字母间距和字间距):跳过边距,边框和填充.用户代理不得在非文本内容上呈现这些文本装饰.例如,图像和内联块不得加下划线.

另请注意,文本装饰会坚持文本本身,因此:

相对定位的后代会移动影响它的所有文本装饰以及后代的文本; 它不会影响装饰在该线上的初始位置的计算.