CSS text-emphasis-positionプロパティ：テキスト強調表示の位置を設定

定義と使用方

text-emphasis-positionプロパティは
text-emphasis-styleで指定された要素の文字の強調表示の位置を指定します。

このプロパティを使用すると、文字の強調表示をデフォルトの位置以外にも設定することができます。

基本の例

参考事項：関連プロパティ

強調表示の位置を設定するtext-emphasis-positionプロパティ以外にも、文字の強調表示スタイルに関連するプロパティがあります。
これらのプロパティと組み合わせて使用することで、文字の強調表示をより多様にスタイリングすることができます。

text-emphasis-styleの関連プロパティ
`text-emphasis-style`	強調表示の形状を設定します。
`text-emphasis-color`	強調表示の色を設定します。
`text-emphasis`	強調表示の形状と色を同時に設定できるショートハンドプロパティです。

覚えておきましょう！
text-emphasis-positionプロパティは、文字の強調表示の形状と色を同時に指定できるショートハンドプロパティであるtext-emphasisでは再設定できません。

形式の構文

CSS

/*
    [ over | under ]
    文字の強調表示の垂直位置を指定する部分で、
    "over" または "under" のいずれかを選択します。
    この部分は `必須` です。
    
    [ right | left ]?:
    文字の強調表示の水平位置を指定する部分で、
    "right" または "left" のいずれかを選択できます。
    この部分は `任意` です。
    指定しない場合は初期値の "right" が適用されます。
*/
selector {
    text-emphasis-position: [ over | under ] && [ right | left ]?;
}

形式の定義

text-emphasis-positionプロパティの形式の定義
初期値	`over right`
適用対象要素	すべての要素
継承	はい

値

text-emphasis-positionプロパティの値
`over`	横書きモードで文字の上に表示します。
`under`	横書きモードで文字の下に表示します。
`right`	縦書きモードで文字の右側に表示します。
`left`	縦書きモードで文字の左側に表示します。

`over` | `under`

横書きモードで文字の強調表示の垂直位置を指定する部分で、overの値は文字の上に表示し、underの値は文字の下に表示します。

この部分は必須です。初期値はoverです。

`right` | `left`

縦書きモードで文字の強調表示の水平位置を指定する部分で、rightの値は文字の右側に表示し、leftの値は文字の左側に表示します。縦書きモードを使用するアジア圏の言語（日本語、韓国語、中国語、モンゴル語など）で使用される文字の強調表示を制御するために考案されました。

この部分は任意です。初期値はrightです。

覚えておきましょう！
強調表示の位置は言語によって異なる場合があります。
例えば、日本語では強調表示の位置として右上（over right）が好まれますが、中国語では右下（under right）が一般的に使用されます。この違いは、縦書きモードにおける文字の強調表示の扱い方に関する文化的・技術的な差異に起因します。

例

[ `right` | `left` ]は任意で、省略可能です。

CSS

p span {
    text-emphasis-style: 'は'; 
    text-emphasis-color: red;
    text-emphasis-position: under; /* [ right | left ]は任意で、省略可能です */
    font-size: 1.5em;
}

縦書きモード

CSS

p span {
    writing-mode: vertical-rl; /* 縦書きモード */
    text-emphasis-style: 'は'; 
    text-emphasis-color: red;
    text-emphasis-position: over left;
    font-size: 1.5em;
}

注意点

CSS [ right | left ]を使用する場合、必ず[ over | under ]の値が指定されている必要があります。指定されていない場合は適用されません。

p span {
    writing-mode: vertical-rl; /* 縦書きモード */
    text-emphasis-style: 'は'; 
    text-emphasis-color: red;
    text-emphasis-position: left; /* 適用されません */
    font-size: 1.5em;
}

ブラウザ互換性

text-emphasis-positionプロパティのブラウザ互換性
プロパティ	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`text-emphasis-position`	99	99	46	7

仕様書

text-emphasis-positionプロパティに関する仕様書
仕様書
`text-emphasis-position`	CSS Text Decoration Module Level 4 #text-emphasis-position-property

参考資料

codingCourses：CSS text-emphasis-position Property – Specifies the Position of Emphasis Marks