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 未サポート 未サポート 未サポート

関連情報

Document Tags and Contributors

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