text-decoration-color

概要

text-decoration-color CSS プロパティは、text-decoration-line で指定される下線、上線、打ち消し線に使う色を設定します。

このプロパティによる線の色づけは、他の HTML 要素との組み合わせで同様のことを行うよりも好ましい方法です。

初期値currentColor
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承不可
メディアvisual
計算値半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
アニメーションの可否可。 の値として補完しますcolor
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* <color> values */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;

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

形式文法

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

.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
text-decoration-color の定義
勧告候補 初期定義。text-decoration プロパティは以前はショートハンドではありませんでした。

ブラウザ互換情報

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 未サポート 6.0 (6.0) - 39.0 (39.0)-moz
36.0 (36.0) without prefix
未サポート 未サポート 7.1 -webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 未サポート 6.0 (6.0) - 39.0 (39.0)-moz
36.0 (36.0) without prefix
未サポート 未サポート 8 -webkit

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

 このページの貢献者: Sebastianz, mitsuba-clover, ethertank, sosleepy, yyss
 最終更新者: Sebastianz,