変更<a>リンクの下線の色

Question

この問題を解決するためのトリックがあるのだろうかと思います。

私は下のテキストのように私のリンクを持っており、下線の色を変更したいと思います。

このリンクは、境界底を使用して、既存の

が複数行あるため、これを解決する方法はないよりも軽量化が下線の色を変更する必要のある多くの行に含まれています。

これを解決する手口はありますか？

EDIT

@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。

EDIT：

テストこの小さなさらに、それはIE上で私のために働いていません。しかし、border-bottomを追加すると、IEが最後の境界の下に境界線を置くことを除いて、驚くべきことにすべてのブラウザで機能します。私は、これを行うためのクロスブラウザの方法があるかどうか見るために少し深く掘り下げようとします...

Answer 2

リンクの下線は、テキスト装飾CSSスタイルを使用して行われます。テキストと同じ色だと思います。

text-decorationをnoneに設定してborder-bottomを追加すると、border-colorスタイルで色を変更できます。

Answer 3

テキスト属性である下線は、テキストの色を継承します。だから私は明示的にテキストの色を変更せずに下線の色を変更する方法があるのだろうか。

Answer 4

リンクのアンダーラインは常にテキストと同じ色になります。

Answer 5

このコードを使用して、異なる色の下線を付けることもできます。あなたはressing古い質問に対する

Answer 6

申し訳ありません、テキストの下に線を描画するためにJavaスクリプトを使用することができます 、しかし、私は同じ問題を抱えていた、と見つけることができませんでした：国境に

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

編集を使用します私は別の解決策を考え出し、あなたと分かち合うと思っていました。

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

OSX（v19.0.1084.56）のChromeでPaolo Bergantinoの答えがうまくいかなかったようです。しかし、タグの内部のスパンを動かすことは、そのトリックを行うように見えました。

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注意：古いブラウザのサポートが完全に

Answer 10

がサポートされていない場合には、誰もが興味を持っている - これは私のために働いた - テキストの装飾色CSSプロパティ：

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

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