mozilla
Your Search Results

    text-decoration-color

    概要

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

    • 初期値 currentColor
    • 適用対象 全要素
    • 継承 しない
    • メディアvisual
    • 計算値 値が半透明なら rgba()に相当する値、それ以外では rgb() に相当する値。キーワード transparentは rgb(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,
    サイドバーを隠す