此链接内链接和跨度的文本装饰答案

【问题标题】：Text decoration for link and span inside this link此链接内链接和跨度的文本装饰
【发布时间】：2012-01-30 15:57:23
【问题描述】：

我有如下链接：

<a href="#">Link text<span>Link sub-text</span></a>

悬停时，我需要跨度内的文本不带下划线（但主链接文本是）。可能吗？我试过了：

a:hover span {text-decoration:none;}

这不起作用。

有什么解决办法吗？

【问题讨论】：

刚刚想通了，我只需要将主链接文本放在跨度内，将子链接文本放在链接跨度外，例如：<a href="#">Link textsub-text</a> 和 CSS:a:hover {text-decoration:none;} a:hover span {text-decoration:underline;} 这对我有用。
相关：CSS text-decoration property cannot be overridden by child element 和How do I get this CSS text-decoration override to work? - 这些问题解释了为什么span 中的text-decoration none 不起作用。所以是的，您的解决方案几乎是解决此问题的唯一方法。

标签： css text-decorations

【解决方案1】：

在 内添加链接文本（要用下划线装饰的文本），在外部添加子文本作为普通链接文本，例如：
<a href="#">Link textsub-text</a>

要装饰链接文本使用：

a:hover {
  text-decoration:none;
} 
a:hover span {
  text-decoration:underline;
}

【讨论】：

【解决方案2】：

一个简单的解决方案是使用color 和border 属性，而不是text-decoration。您需要先设置text-decoration: none，然后使用border-bottom 作为所有链接的下划线。

style.css

a, a:link, a:visited
{
color: #11bad3;
text-decoration: none;
border-bottom: 1px solid #11bad3;
}

a:hover, a:active 
{
background: #00a9c2;
border-color: #00a9c2;
color: #fff;
}

print.css

a, a:link, a:visited 
{
border-bottom: 0px;
}

index.html

<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print">

【讨论】：

【解决方案3】：

我知道这是一篇旧帖子，但由于我刚刚遇到同样的问题并想出了一个解决方案，所以我想我还是会写它。

不要尝试使用text-decoration: underline，而是直接使用border-bottom: 1px solid #000，这样你就可以简单的说border-bottom: none,

【讨论】：

【解决方案4】：

另一种解决方案是使用颜色而不是下划线作为标识符：

<a id="outer-link" href="#">
    Outer text <span id="inner-text">inner text</span> more outer text.
</a> 

<style>
    a { text-decoration: none; }
    #outer-link:hover { color: green; }
    #outer-link:hover #inner-text { color: red; }
</style>

【讨论】：

可以，也可以是粗体、斜体、大写等，请不要张贴一切可能的方式，问题只是关于下划线。谢谢。