32

私はここにこのコードを持っています：

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

まず、ご覧のとおり、下線が引かれています（<u>）。次に、すべてのテキストがすべて赤です。とにかく、テキスト（$ username）を赤のままにして、下線を黒のままにすることはできますか？

4

14 に答える 14

60

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

したがって、テキストを1つの色で、テキスト装飾の下線を別の色で表示できるようになりました...余分な「wrap」要素は必要ありません

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

注意：

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>

于 2014-02-06T09:44:51.887 に答える
22

著者からの更新： text-decoration-colorがほとんどの最新のブラウザーでサポートされるように
なったため、この回答は古くなっています。

：pseudo + em

余分なHTMLマークアップを導入せずに、ネイティブのサイズ、ストローク幅、および位置を正確に複製するには、withunitsを使用する必要があります。これにより、追加のマークアップなしで、要素の正確なスケーリングとネイティブの動作が可能になります。 text-decoration:underline pseudo-elementem

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

display：table-captionを使用caption-sideし、疑似要素とdisplayinline-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 Chrome： 45、44、43、42 Safari：
8、7、6.2
Mobile Safari：9.0、8.0
Androidブラウザ：4.4、2.3
Dolphin Mobile：8、11.4

于 2015-03-07T16:48:48.860 に答える
12

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仕様によると：「テキスト装飾に必要な色は、「text-decoration」が設定されている要素の「color」プロパティ値から派生する必要があります。子孫要素の「色」の値が異なっていても、装飾の色は同じでなければなりません。」</ p>

于 2012-09-24T04:17:37.373 に答える
12

いいえ。できる最善の方法はborder-bottom、別の色でを使用することですが、それは実際には下線を引いていません。

于 2012-09-24T01:14:20.693 に答える
6

私がこれに取り組んだ最も簡単な方法は、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>
于 2012-09-24T01:16:35.730 に答える
4

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);
}
于 2014-06-20T19:12:42.100 に答える
3

danieldで説明されているもう1つの方法は、子コンテナの幅をインラインで表示し、必要なティポグラフィの色を表示することです。親要素の幅はテキストの装飾であり、必要な下線の色です。このような：

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>

于 2015-02-22T21:32:40.463 に答える
2

疑似要素が最適です。

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を参照してください。

余分な要素は必要ありません。テキストから好きなだけ近くまたは遠くに配置できます（境界線の下部は私の好みでは少し遠いです）。リンクが終わった場合に表示される余分な色はありません。異なる色の背景（ボックスシャドウのトリックなど）で、すべてのブラウザーで機能します（text-decoration-colorは現在Firefoxのみをサポートしています）。

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

于 2014-07-18T00:39:29.683 に答える
1

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

text-decoration: none;
border-bottom: 1px solid #000;
于 2012-09-24T01:17:59.017 に答える
1

でラップ<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>

于 2016-08-23T10:06:22.673 に答える
1

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

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

于 2017-03-13T10:21:26.137 に答える
1

これを行う最も簡単な方法は、cssで使用することだと思います。

text-decoration-color: red;

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

于 2017-07-03T18:12:55.430 に答える
0

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

 u {
    text-decoration: none;
    background: transparent url(blackline.png) repeat-x 0px 12px;
}
于 2016-03-23T15:25:56.290 に答える
0

私が出くわした最善の方法は次のようなものです。

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;
}
于 2018-11-28T13:26:00.880 に答える