最終更新日:
公開日:
リファレンス
CSS
テキスト エンファシス
text-emphasisプロパティ
テキストの圏点(文字の上に付ける点)について、色とスタイルを一括指定するプロパティです。
-
初期値
各プロパティに準拠
-
継承
不可
-
適用できる要素
全要素
値
このプロパティはtext-emphasis-styleプロパティとtext-emphasis-colorプロパティをまとめて指定することができます。
印の表示位置を指定するtext-emphasis-colorプロパティは指定できないため、個別に指定する必要があります。
CSSコード例
p span {
text-emphasis: triangle blue;
-webkit-text-emphasis: triangle blue;
}
Note
このプロパティは2018年12月現在、IE11とEdgeは対応していません。
使用例
印のスタイル、色、表示位置を指定
text-emphasisプロパティとtext-emphasis-positionプロパティを使って、印のスタイル、色、表示位置を指定します。
2018年12月現在、ChromeとOperaでこのプロパティを使用するにはベンダープレフィックス「-webkit-」を付けて指定する必要があります。
HTMLコード例
<p class="sample2">印の<span>スタイルと色</span>をまとめて指定する</p>
CSSコード例
.sample2 span {
text-emphasis: circle #ccc;
-webkit-text-emphasis: circle #ccc;
text-emphasis-position: under left;
-webkit-text-emphasis-position: under left;
}
印のスタイルと色はtext-emphasisプロパティで指定し、表示位置についてはtext-emphasis-positionプロパティから指定しています。