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リンク
- https://developer.mozilla.org/ja/docs/Web/CSS/text-emphasis-position
- https://drafts.csswg.org/css-text-decor/#text-emphasis-position-property
Copyright (C) 2022 杜甫々
初版：2022年7月31日、最終更新：2022年7月31日
https://www.tohoho-web.com/css/prop/text-emphasis-position.htm