mozilla
Your Search Results

    text-decoration-color

    概要

    text-decoration-color CSS プロパティは、text-decoration-line で指定される下線、上線、打ち消し線に使う色を設定します。このプロパティによる線の色づけは、他の HTML 要素との組み合わせで同様のことを行うよりも好ましい方法です。

    • 初期値 currentColor
    • 適用対象 全要素
    • 継承 しない
    • メディアvisual
    • 計算値 値が半透明なら rgba()に相当する値、それ以外では rgb() に相当する値。キーワード transparentrgb(0,0,0) にマップされます
    • アニメーションの可否 可。colorとして可能

    構文

    text-decoration-color: <color> | inherit
    

    <color>
    color プロパティでは多数のキーワードや数値記法を使えます. 詳しくは <color> 値をご覧ください。

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

    上の例は、以下のコードと同じ装飾を行います。また、以下のコードでは hover スタイルを追加しています。

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .example {
      font-size: 24px;
      text-decoration: underline;
      color: red;
    }
    .example:hover {
      color: blue;
      text-decoration: line-through;
    }
    </style>
    </head>
    <body>
    <span class="example">
      <span style="color:black">black text with red underline and blue hover</span>
    </span>
    </body>
    </html>
    

    仕様

    仕様書 策定状況 コメント
    CSS Text-decoration Level 3 勧告候補  

    ブラウザの互換性

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 未サポート 6.0 (6.0)-moz 未サポート 未サポート 未サポート
    (537.33) -webkit
    機能 Android Firefox mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート 未サポート 6.0 (6.0)-moz 未サポート 未サポート 未サポート

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: sosleepy, ethertank, yyss
    最終更新者: ethertank,
    サイドバーを隠す