如何摆脱<a> tag with hover?</a> </span>内<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的{​​{1}}更改为<span>，如下所示：

<强> Example Here

inline-block

说明

根据CSS level 2 specification，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 */ } 不会传播到嵌套原子内联级元素的内容 - 例如内联块和内联表。

  

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

     

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

该规范还指出（我的重点）：

  

下划线，上划线和直通广告仅应用于文字   （包括空格，字母间距和字间距）：边距，   边框和填充将被跳过。用户代理不得呈现这些内容   内容上的文本装饰不是文本。例如，图像和   内联块不得加下划线。

另请注意，文本装饰会坚持文本本身，因此：

  

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

Answer 2

添加此

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