web-dev-qa-db-ja.com

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

この問題を解決するためのトリックはあるのでしょうか。

下のテキストにリンクがあり、下線の色を変更したい。

このリンクには、下線の色を既存のものよりも明るくする必要がある多くの行が含まれています

複数の線があるため、ボーダーボトムを使用することはこれを解決する方法ではありません。

これを解決するためのトリックはありますか？

[〜＃〜]編集[〜＃〜]

@Paolo Bergantino：IE8で動作しますが、IE6,7でハッキングすることは可能ですか？

csscross-browser
25
pang

下線の色がテキストの色と異なる場合は、リンクの周りにスパンを追加することしか考えられません。

<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が最後の境界線の下に境界線を配置しないことを除いて、すべてのブラウザーで驚くほど機能します。少し掘り下げて、これを行うクロスブラウザの方法があります...

30
Paolo Bergantino

Paolo Bergantinoの答えは、Chrome）ではうまくいかなかったようですが、タグ内でスパンを移動するとうまくいくようです。

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/

15
themarkappleby

誰かが興味を持っている場合-これは私のために働きました-text-decoration-color CSSプロパティ：

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

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

7
ColinMcDermott

またはボーダーを使用できます。このメソッドは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/

3
lastbyte

下線付きのテキスト属性は、テキストの色を継承します。したがって、テキストの色を変更せずに下線の色を明示的に変更する方法はないと思います。

2
Joey

リンクの下線は常にテキストと同じ色になります。

2
Chris Pietschmann

古い質問を再入力して申し訳ありませんが、同じ問題が発生していて、満足のいく答えが見つからなかったため、別の解決策を考え、それを共有したいと思いました。

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

これは古い質問であることはわかっていますが、これを追加したいと思いました...

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

注：古いブラウザのサポートは完全にはサポートされていません

1
Paul Dessert

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

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

0
John Boker