CSS - text-emphasis-position

概要

属性名 text-emphasis-position
値 [ over | under ] && [ right | left ]?
初期値over right
適用可能要素テキスト
継承する
サポートhttps://caniuse.com/?search=text-emphasis-position

説明

テキストの圏点(けんてん)の位置を指定します。text-emphasis では指定することができません。

値説明
over横書きの場合に上部に表示します。
under横書きの場合に下部に表示します。
right縦書きの場合に右側に表示します。
left縦書きの場合に右側に表示します。

使用例

CSS
.filled-circle {
  text-emphasis: filled circle red;
  font-size: 20pt;
  margin-right: 1em;
}
.vrl {
  writing-mode: vertical-rl;
}
.over {
  text-emphasis-position: over;
}
.under {
  text-emphasis-position: under;
}
.right {
  text-emphasis-position: over right;
}
.left {
  text-emphasis-position: over left;
}
HTML
<span class="filled-circle over">いろは</span>
<span class="filled-circle under">いろは</span>
<span class="filled-circle vrl right">いろは</span>
<span class="filled-circle vrl left">いろは</span>
表示
いろは いろは いろは いろは

関連項目

text-emphasis

リンク

Copyright (C) 2022 杜甫々
初版：2022年7月31日、最終更新：2022年7月31日
https://www.tohoho-web.com/css/prop/text-emphasis-position.htm