更改<a>链接下划线颜色

Question

我想知道是否有什么技巧来解决这个问题。

我有一个链接，想将下划线颜色改变。

该链接跨越多行文本，需要将下划线颜色变得比现有的更浅

使用border-bottom并不是解决方案，因为存在跨越多行的情况。

有没有什么技巧可以解决这个问题？

编辑

@Paolo Bergantino： 在IE8中有效，是否可能与IE6,7兼容？

- pang

---

在IE7上对我也不起作用，这真奇怪。 - Paolo Bergantino

啊，我测试了错误的窗口，只在IE8上有效。 - pang

抱歉，我还没有想出任何东西。 - Paolo Bergantino

没关系，我也试过了，但还没有找到任何东西。谢谢你的帮助 :) - pang

在2021年，您可以使用text-decoration-color。https://dev59.com/DXM_5IYBdhLWcg3w6HvT#29996777 - ColinMcDermott

Answer 1

如果您的意思是希望链接下划线颜色与文字不同，我能想到的唯一办法就是在链接周围添加一个标签。

<span class='underline'>
    <a href="#">this just<br>a test<br>of underline color</a>
</span>

然后是 CSS：

span.underline { 
    color: red; 
    text-decoration: underline; 
} 
span.underline a { 
    color: blue; 
    text-decoration: none; 
} 

并且你能够得到你想要的。

编辑：

进一步测试后，发现在IE上无法正常工作。然而，如果添加border-bottom，它出奇地可以在所有浏览器中正常工作，但是IE不会在最后一个下方放置边框。我将尝试深入挖掘是否有跨浏览器的方法来解决这个问题...

- Paolo Bergantino

---

如果每个主要的浏览器都支持 :before 和 :after 伪元素选择器，那么这个例子会更加酷炫。 - Dan Herbert

这将影响所有链接选择器，因此用户将无法区分他们访问过的链接。 - OMG Ponies

我将会记下这个内容以供将来参考，它非常简单但完美运作。 - MitMaro

Answer 2

如果有人感兴趣 - 这对我有效 - text-decoration-color CSS 属性:

.example { 
    text-decoration: underline;
    text-decoration-color: red;
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-color

2121更新：这很有用！其他有用的CSS是https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-underline-offset，用于控制下划线和文本之间的距离。

- ColinMcDermott

---

理想的解决方案，但仍未得到 Chrome 的支持 :( - Niahc

这是用于现代浏览器的属性。 - xji

截至今日，所有主要浏览器都支持该属性。 - Gavin

Answer 3

Paolo Bergantino的答案在我使用Chrome for OSX (v19.0.1084.56)时似乎不起作用。然而，将span标签移到a标签内部似乎可以解决问题。

HTML代码：

<a class="underline" href="#">
    <span>Hello world<br>this is a test<br>of changing the underline colour</span>
</a>​

还有 CSS

.underline {
    color: red;           
}

.underline span {
    color: gray;           
}

您可以在这里查看：http://jsfiddle.net/itsmappleby/f4mak/

- themarkappleby

---

适用于FF，IE6-10，Chrome，Safari。 - user246672

Answer 4

您可以使用边框来实现此效果。在IE6中，这种方法是可行的。

HTML

<a href="#" class='underline'>
  <span>this just</span><br/>
  <span>a test</span><br/>
  <span>of underline color</span>
</a>

CSS

  a.underline {
    text-decoration: none;
  }
  a.underline span {
    display: inline-block;
    border-bottom: 1px solid red;
    font-size: 15px;
    line-height: 12px;
  }

例如：http://jsfiddle.net/skanY/1/embedded/result/

- lastbyte

---

-1 的缺点是您必须更加注意 <a> 标签的内容。如果文本在框内换行，而不是您插入换行符，这将无法正常工作。 - Peter Bagnall

实际上，你可以将“inline-block”替换为“inline”，这样也可以工作，但不正确。 - lastbyte

如果您能在回答中解释清楚，我可以取消我的负评！显然，在回答被编辑之前我不能这样做。但是它为什么不能正常工作呢？ - Peter Bagnall

你可以像这样移除 "inline-block" http://jsfiddle.net/skanY/4/。然后，如果文本在框内换行，下划线会正确显示，但位置会比应该的低。 - lastbyte

Answer 5

作为文本属性，下划线会继承文本的颜色。因此，我怀疑没有明确地改变下划线颜色而不改变文本颜色的方法。

- Joey

Answer 6

链接的下划线颜色将始终与文本颜色相同。

- Chris Pietschmann

Answer 7

抱歉提出一个旧问题，但我遇到了同样的问题，并没有找到令人满意的答案，所以我想到了一个不同的解决方案，并与您分享。

它包括一个1x1的背景图像（或您喜欢的任何大小），但它干净简单 - 并且100％浏览器兼容（从IE6及以上测试）。

此示例具有更改颜色的文本，而下划线保持不变。您也可以轻松地以其他方式完成它。

a, a:link, a:active, a:visited{
    text-decoration:none;
    color:#888;
    background:transparent url('underline.png');
    background-position:0 10px;
    background-repeat:repeat-x;
}

a:hover{
    color:#009ee0;
}

- labtoy

Answer 8

使用：

<a href="your-link/" style="text-decoration-color: COLOROFUNDERLINE;">

- Devmyselz

Answer 9

我知道这是一个老问题，但我想补充一下...

a:active, a:link, a:visited{
    background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%);
    text-decoration: none;
    background-size: 2px 2px;
    background-position: 0 1.2em;
    background-repeat: repeat-x;
}

注意：旧版浏览器支持不完整。

- Paul Dessert

Answer 10

链接下划线是使用text-decoration CSS样式完成的，我认为它与文本颜色相同。

如果您将text-decoration设置为none，然后添加border-bottom，您可以使用border-color样式更改颜色。

- John Boker