web-dev-qa-db-ja.com

下線の色を変更する

ここにこのコードがあります：

echo "<u><font color='red'><br>$username</font></u>";

まず、ご覧のとおり、下線が付いています（<u>）。第二に、すべてのテキストはすべて赤です。とにかく、テキスト（$ username）を赤のままにして下線を黒のままにしておく方法はありますか？

htmlcssunderline
29
user1641508

いいえ。できることは、border-bottomは異なる色ですが、それは本当に下線ではありません。

12
Ignacio Vazquez-Abrams

このための新しいcss3プロパティがあります： text-decoration-color

これで、余分な「ラップ」要素を必要とせずに、1色のテキストとテキスト装飾の下線を別の色で...持つことができます

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}
<p>black text with red underline in one element - no wrapper elements here!</p>

Codepen

NB：

1） ブラウザサポート は現時点ではFirefoxに限定されており、Chrome（V57で完全にサポート）およびSafari

2） text-decoration ショートハンドプロパティを使用することもできます。

<text-decoration-line> || <text-decoration-style> || <text-decoration-color>

...したがって、text-decoration略記-上記の例は単純に次のようになります。

p {
  text-decoration: underline red;
}

p {
  text-decoration: underline red;
}
<p>black text with red underline in one element - no wrapper elements here!</p>
52
Danield

著者からの更新：
text-decoration-color が現在のほとんどのブラウザでサポートされているため、この回答は時代遅れです。

：疑似+ em

ネイティブのサイズ、ストローク幅、および配置を正確に複製するために text-decoration:underline追加のHTMLマークアップを導入せずに、 pseudo-element with em units。これにより、追加のマークアップなしで、要素とネイティブの動作を正確にスケーリングできます。

CSS

`a {
  text-decoration: none;
  display: inline-table;
}

a:after {
  content: "";
  border-bottom: 0.1em solid #f00;
  display: table-caption;
  caption-side: bottom;
  position: relative;
  margin-top:-0.15em;
}`

ディスプレイを使用して： table-caption および caption-side 擬似要素と表示で inline-table 、スケーリングされた場合でも、ブラウザで行とリンクの両方を正確に垂直方向に揃えることができます。

この例では、inline-blockの代わりにinline-tableを使用して、高さや負の値を指定せずに擬似を強制的に表示します。

例

[〜＃〜] jsfiddle [〜＃〜]：https://jsfiddle.net/pohuski/8yfpjuod/8/
[〜＃〜] codepen [〜＃〜]：http://codepen.io/pohuski/pen/vEzxPj |（例スケーリング）

テストに成功しました：
Internet Explorer：8、9、10、11
Firefox：41、40、39、38、37、36
クローム：45、44、43、42
サファリ：8、7、6.2
モバイルSafari：9.0、8.0
Androidブラウザ：4.4、2.3
Dolphin Mobile：8、11.4

22
Huski

実際には、spanの代わりにfont要素を使用すると可能です。

<style>
u { color: black; }
.red { color: red }
</style>
<u><span class='red'><br>$username</span></u>

jsfiddle を参照してください。 Chrome、Safari、Firefox、IEで動作するようですOpera（最新バージョンのWin 7でテスト済み）。

質問のコードも機能するはずですが、何らかの理由でWebKitブラウザー（Chrome、Safari）では機能しません。

CSS spec ：「テキスト装飾に必要な色は、「text-decoration」が設定されている要素の「color」プロパティ値から導出する必要があります。子孫要素の「色」の値が異なっていても、装飾の色は同じままでなければなりません。」

12
Jukka K. Korpela

私がこれに取り組んだ最も簡単な方法は、CSSを使用することです。

<style>
.redUnderline {
    color: #ff0000;
    border-bottom: 1px solid #000000;
}
</style>
<span class="redUnderline">$username</span>

また、実際の下線については、アイテムがリンクの場合、これは機能します：

<style>
a.blackUnderline {
   color: #000000;
   text-decoration: underline;
}
.red {
    color: #ff0000;
}
</style>
<a href="" class="blackUnderline"><span class="red">$username</span></a>
6
AE Grey

Box-shadowプロパティを使用して、下線をシミュレートすることもできます。

フィドル です。アイデアは、2つの階層化されたボックスシャドウを使用して、下線と同じ場所に線を配置することです。

a.underline {
    text-decoration: none;
    box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 1), inset 0 -5px 0 0 rgba(255, 0, 0, 1);
}
4
Berry Blue

Danieldによって記述された方法の別の方法は、子コンテナの幅をインラインで表示し、必要なグラフィックの色を表示することです。親要素の幅はテキスト装飾、必要な下線の色です。このような：

div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div span{color:#000;display:inline}
<div>
  <span>Hover me, i can have many lines</span>
</div>
3
Samuel Tesler

擬似要素が最適です。

a, a:hover {
  position: relative;
  text-decoration: none;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  height: 0;
  top:90%;
  left: 0;
  right: 0;
  border-bottom: solid 1px red;
}

jsfiddle を参照してください。

余分な要素は必要ありません。テキストから好きなだけ近づけたり遠ざけたりすることができます（境界線は私の好みには少し遠いです）。リンクが終わったときに現れる余分な色はありません。異なる色の背景（box-shadowトリックのように）、それはすべてのブラウザーで動作します（text-decoration-colorはまだFirefoxのみをサポートしています）。

考えられる欠点：リンクをposition：staticにすることはできませんが、ほとんどの場合、これはおそらく問題ではありません。相対に設定するだけで、すべてが良好です。

2
Johnny5k

ここで、テキストに色付きの下線を作成できます

<u style="text-decoration-color: red;">The color of the lines should now be red!</u>

または

線の色が赤になります！

<h1 style=" text-decoration:underline; text-decoration-color: red;">The color of the lines should now be red!</u>
1
shraddha Tripathi

<span> とともに <a>そして、この小さなJQueryプラグインを使用して下線に色を付けます。プラグインにパラメーターを渡すことで色を変更できます。

    (function ($) {
        $.fn.useful = function (params) {

            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);

            this.wrap('<a></a>');
            var element = this.closest('a');
            element.css(aCSS);
            return element;
        };
    })(jQuery);

次に、これを書いて呼び出します：

    $("span.name").useful({color:'red'});

$(function () {

        var spanCSS = {
            'color' : '#000',
            'text-decoration': 'none'
        };
        
        $.fn.useful = function (params) {
            
            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);
            this.wrap('<a></a>');
            this.closest('a').css(aCSS);
        };

        // Use example:
        $("span.name").css(spanCSS).useful({color:'red'});



    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="container">

    <div class="user important">
        <span class="name">Bob</span>
        -
        <span class="location">Bali</span>
    </div>

    <div class="user">
        <span class="name">Dude</span>
        -
        <span class="location">Los Angeles</span>
    </div>


    <div class="user">
        <span class="name">Gérard</span>
        -
        <span class="location">Paris</span>
    </div>

</section>
1
Tristan C

これを行う最も簡単な方法は、あなたのCSSであると思います：

text-decoration-color: red;

これにより、テキストの色を変更せずに下線の色が変更されます。がんばろう！

1
Cassie H.

このCSSを使用して、下線を「シミュレート」できます。

text-decoration: none;
border-bottom: 1px solid #000;
1
Gung Foo

私がやってきた最高の方法は次のようなものです：

HTML5：

<p>Initial Colors <a id="new-color">Different Colors</a></p>

CSS3：

p {
    color: #000000;
    text-decoration-line: underline;
    text-decoration-color: #a11015;
}

p #new-color{
    color: #a11015;
    text-decoration-line: underline;
    text-decoration-color: #000000;
}
0
SoulOfShadows23

border-bottomの問題は、テキストと行の間の余分な距離です。 text-decoration-colorの問題は、ブラウザーのサポート不足です。したがって、私の解決策は、線で背景画像を使用することです。これは、ラインのマークアップ、色、スタイルをサポートします。 top（私の例では12px）は、テキストのline-heightに依存しています。

 u {
    text-decoration: none;
    background: transparent url(blackline.png) repeat-x 0px 12px;
}
0
JanP