最終更新日:
公開日:
リファレンス
CSS
テキスト エンファシス カラー
text-emphasis-colorプロパティ
テキストの圏点(文字の上に付ける点)の色を指定するプロパティです。
-
初期値
currentColor
-
継承
不可
-
適用できる要素
全要素
値
text-emphasisプロパティでテキストの強調したい部分に印を表示する場合、text-emphasis-colorプロパティで印の色を設定することができます。
色の指定方法については、カラーネーム、カラーコード、rgbaで指定します。
CSSの色の指定方法については、「CSSでの色の指定方法について」をご覧ください。
Note
このプロパティは2018年12月現在、IE11とEdgeは対応していません。
使用例
text-emphasis-styleプロパティで指定した印に対し、text-emphasis-colorプロパティで色を指定していきます。
2018年12月現在、ChromeとOperaでこのプロパティを使用するにはベンダープレフィックス「-webkit-」を付けて指定する必要があります。
HTMLコード例
<p class="sample1">表示サンプル<span>その1</span></p>
<p class="sample2">表示サンプル<span>その2</span></p>
<p class="sample3">表示サンプル<span>その3</span></p>
<p class="sample4">表示サンプル<span>その4</span></p>
CSSコード例
/* 色指定なし(初期値) */
.sample1 span {
text-emphasis-style: circle;
-webkit-text-emphasis-style: circle;
}
.sample2 span {
text-emphasis-style: circle;
-webkit-text-emphasis-style: circle;
text-emphasis-color: red;
-webkit-text-emphasis-color: red;
}
.sample3 span {
text-emphasis-style: circle;
-webkit-text-emphasis-style: circle;
text-emphasis-color: #2484bf;
-webkit-text-emphasis-color: #2484bf;
}
.sample4 span {
text-emphasis-style: "♥";
-webkit-text-emphasis-style: "♥";
text-emphasis-color: rgba( 90, 189, 248, 1.0);
-webkit-text-emphasis-color: rgba( 90, 189, 248, 1.0);
}