text-emphasis-colorプロパティ

値

text-emphasisプロパティでテキストの強調したい部分に印を表示する場合、text-emphasis-colorプロパティで印の色を設定することができます。

色の指定方法については、カラーネーム、カラーコード、rgbaで指定します。
CSSの色の指定方法については、「CSSでの色の指定方法について」をご覧ください。

使用例

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);
}

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。