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

问题描述：

我不知道是否有任何技巧来解决这个问题。更改<a>链接下划线颜色

我有我的链接，如下面的文字，并且想要改变下划线的颜色。

此链接包含许多线，需要改变下划线颜色比现有的一个

使用边框底部打火机是不是为了解决这一点，因为多行的方式。

有没有什么窍门可以解决这个问题？

编辑

@Paolo Bergantino：它的工作原理与IE8，是否有可能与IE6,7破解？

它不为我工作实际上，IE7也是如此。这很奇怪。 – 2009-07-24 02:10:24

啊，我测试了错误的窗口，只适用于IE8 – pang 2009-07-24 02:17:53

对不起，我一直没有能够拿出任何东西。 – 2009-07-24 02:51:05

答

如果你的意思是不同的下划线颜色比文本是什么，我能想到的唯一的事情就是添加一个跨度围绕链接：

<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浏览器。但是，如果您添加边框底部，则令人惊讶的是，它可以在所有浏览器中工作，但IE不会在最后一个边框下放置边框。我会试着深入一点，看看是否有跨浏览器的方式来做到这一点...

如果每个主流浏览器支持`：before`和`：after`伪选择器，这个例子可能会更酷。 – 2009-07-24 01:37:51

+1回答实际问题。 – 2009-07-24 01:40:09

答

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

如果将文字修饰设置为无，则添加边框底部可以使用边框颜色样式更改颜色。

我有多行文本，所以边界底部没有解决 – pang 2009-07-24 01:36:39

答

带下划线的是文本属性，它继承文本的颜色。所以我怀疑是否有一种方法可以在不更改文本颜色的情况下明确更改下划线颜色。

答

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

答

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

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

编辑：您可以使用Java脚本来绘制文本

答

对不起ressing一个老问题下一条线，但我有同样的问题，并没有找到一个满意的答案，所以我想出了一个不同的解决方案，并认为我会与你分享。它确实包括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; 
}

答

Paolo Bergantino的回答在OSX上的Chrome（v19.0.1084.56）上似乎不适用于我。然而，移动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/

答

或者你可以使用边界。这种方法在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/

答

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

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

N OTE：旧的浏览器支持不完全支持

答

如果有人有兴趣 - 这为我工作 - 文本装饰色CSS属性：

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

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

更改链接下划线颜色

相关推荐