Question

我想知道是否有任何技巧可以解决这个问题。

我的链接如下文所示，并希望更改下划线颜色。

此链接包含许多行，需要将下划线颜色更改为比现有颜色更轻

使用border bottom不是解决这个问题的方法，因为多行。

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

修改

@Paolo Bergantino：它适用于IE8，是否有可能破解IE6,7？

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; 
}

you get what you want。

修改：

稍微测试一下，它在IE上对我不起作用。但是，如果你添加border-bottom，它会令人惊讶地在所有浏览器中都有效，除了IE没有在最后一个边框下放置边框。我将尝试深入挖掘一下，看看是否有跨浏览器的方式来实现这一目标......

Answer 2

Paolo Bergantino的回答似乎对我在OSX上的Chrome（v19.0.1084.56）没有用。然而，移动标签内部的跨度似乎可以解决问题。

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/

Answer 3

或者你可以使用边框。该方法适用于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/

Answer 4

作为文本属性的下划线，继承文本的颜色。所以我怀疑有一种方法可以明确地改变下划线颜色而不改变文本颜色。

Answer 5

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

Answer 6

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

它确实包含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;
}

Answer 7

我知道这是一个老问题，但我想我会添加这个......

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;
}

注意：不完全支持较旧的浏览器支持

Answer 8

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

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

Answer 9

此外，您可以使用此代码制作不同颜色的下划线。使用边框

h1{
     border-bottom: 1px solid #AAAAAA
}

编辑：您可以使用java脚本在文本

下绘制一条线

正在改变<a> link underline color</a>

9 个答案: