定義と使用方

text-emphasis-colorプロパティは、
text-emphasis-styleで指定された要素のテキスト強調表示の色を指定します。

このプロパティを使用すると、テキストの色以外にも強調表示の色を自由に指定することができます。

色を明示的に指定しない場合、強調表示の色はデフォルトでテキスト自体の計算済みの現在の色で表示されます。

基本の例

CSSライブデモ：text-emphasis-color デモボタンをクリックしてみてください。

参考事項：関連プロパティ

text-emphasis-colorプロパティによる強調表示の色の設定以外にも、テキストの強調表示スタイルに関連するプロパティがあります。
これらのプロパティと併用することで、テキストの強調表示をより多様にスタイリングすることができます。

text-emphasis-styleの関連プロパティ
text-emphasis-style 強調表示の形状を設定します。
text-emphasis 強調表示の形状と色を一度に設定できるショートハンドプロパティです。
text-emphasis-position 強調表示の位置を設定します。

形式の構文

CSS 
selector {
    text-emphasis-color: <color>
}

値

text-emphasis-colorプロパティの値
<color> 色の値

構文

CSS 
/* <color>の値 */
text-emphasis-color: currentcolor;
text-emphasis-color: red;
text-emphasis-color: #00a0e9;
text-emphasis-color: rgb(255, 255, 128);
text-emphasis-color: rgba(255, 255, 128, 0.5);
text-emphasis-color: transparent;


/* グローバル値 */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: revert;
text-emphasis-color: revert-layer;
text-emphasis-color: unset;

形式の定義

text-emphasis-colorプロパティの形式定義
初期値 currentcolor（現在の文字色）
適用対象の要素 すべての要素
継承 はい
アニメーション はい

例

CSS 
p span {
    text-emphasis-style: triangle;
    text-emphasis-color: red;
}
HTML 
<p>テキストに<span>強調表示</span>があります。</p>
実際の適用例

ブラウザ互換性

text-emphasis-colorプロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
text-emphasis-color 99 99 46 7

仕様書

text-emphasis-colorプロパティに関する仕様書
仕様書
text-emphasis-color CSS Text Decoration Module Level 4
#text-emphasis-color-property

参考資料

関連項目