text-emphasis-positionプロパティ

値

text-emphasisプロパティを使ってテキストの強調したい箇所に印をつけるときに、テキストの上下どちらに印を表示するかをtext-emphasis-positionプロパティで指定することができます。

• over – 横書きテキストに対し、上側に印を表示する。初期値
• under – 横書きテキストに対し、下側に印を表示する。
• right – 縦書きテキストに対し、右側に印を表示する。初期値
• left – 横書きテキストに対し、左側に印を表示する。

使用例

text-emphasis-positionプロパティの値の指定は、「over right」のように「 (半角スペース)」で区切って横書きのときの位置、縦書きのときの位置を2つ指定します。
順番はどちらが先でも大丈夫です。
1つしか指定しなかった場合、指定した内容が表示に反映されないので注意してください。

2018年12月現在、Chrome、Operaに反映させるにはベンダープレフィックス「-webkit-」をつけて指定する必要があります。

横書きのテキストに対して印の位置を指定する

横書きテキストの上下に印を表示する例です。
上側に表示する「over」か、下側に表示する「under」のいずれかを指定します。

HTMLコード例

<p class="sample1">テキストの<span>強調したい部分</span>に印を表示する。</p>
<p class="sample2">印の位置は<span>任意</span>で設定することができる。</p>

CSSコード例

.sample1 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-position: over right;
	-webkit-text-emphasis-position: over right;
}
.sample2 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-position: under left;
	-webkit-text-emphasis-position: under left;
}

縦書きのテキストに対して印の位置を指定する

続いて、縦書きのテキストの場合に印を左右に表示する指定を行います。
テキストの右側に表示する「right」か、左側に表示する「left」のいずれかを指定します。

HTMLコード例

<p class="sample3"><span>縦書きのテキスト</span>についても印の位置を指定できる。</p>
<p class="sample4">縦書きの場合は<span>左か右</span>のいずれかを指定する。</p>

CSSコード例

.sample3 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-position: over right;
	-webkit-text-emphasis-position: over right;
}
.sample4 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-position: over left;
	-webkit-text-emphasis-position: over left;
}

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

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