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.有办法摆脱它吗？
解决方法
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,文本修饰不会传播到嵌套的原子内联级元素的内容 – 例如内联块和内联表.
07002
[…] 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.
