更改<a>鏈接下劃線顏色

Question

我不知道是否有任何技巧來解決這個問題。

我有我的鏈接，如下面的文字，並且想要改變下劃線的顏色。

此鏈接包含許多線，需要改變下劃線顏色比現有的一個

使用邊框底部打火機是不是爲了解決這一點，因爲多行的方式。

有沒有什麼竅門可以解決這個問題？

編輯

@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瀏覽器。但是，如果您添加邊框底部，則令人驚訝的是，它可以在所有瀏覽器中工作，但IE不會在最後一個邊框下放置邊框。我會試着深入一點，看看是否有跨瀏覽器的方式來做到這一點...

Answer 2

鏈接上的下劃線是使用文本裝飾CSS樣式完成的，我認爲它與文本顏色相同。

如果將文字修飾設置爲無，則添加邊框底部可以使用邊框顏色樣式更改顏色。

Answer 3

帶下劃線的是文本屬性，它繼承文本的顏色。所以我懷疑是否有一種方法可以在不更改文本顏色的情況下明確更改下劃線顏色。

Answer 4

鏈接的下劃線將始終與文本顏色相同。

Answer 5

此外，您可以使用此代碼使不同顏色的下劃線。使用邊框

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

編輯： 您可以使用Java腳本來繪製文本

Answer 6

對不起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; 
} 

Answer 7

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/

Answer 8

或者你可以使用邊界。這種方法在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 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; 
} 

N OTE：舊的瀏覽器支持不完全支持

Answer 10

如果有人有興趣 - 這爲我工作 - 文本裝飾色CSS屬性：

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

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