CSSのtext-emphasisプロパティでテキストと色を強調する方法

CSSのtext-emphasisプロパティでテキストと色を強調する方法

CSSのtext-emphasisプロパティを使用すると、テキストに強調マーク（圏点）を付けて、その色を指定することができます。日本語の文章で重要な語句を目立たせたい場合などに活用できる便利なプロパティです。

基本構文

text-emphasisプロパティの基本的な書き方は以下の通りです。

text-emphasis: text-emphasis-style text-emphasis-color;

それぞれの値の意味は次のようになっています。

• text-emphasis-style: 要素のテキストに適用する強調マークの種類（形状）を指定します。
• text-emphasis-color: 強調マークの前景色を指定します。

使用例

例えば、次のように記述すると、対象のテキストに赤い丸形の強調マークが表示されます。

.example {
  text-emphasis: filled circle red;
}

指定できる主な強調スタイル

• filled / open: マークを塗りつぶすか、中抜きにするかを指定します。
• dot・circle・double-circle・triangle・sesame: マークの形状を指定します。
• none: 強調マークを表示しません。

補足：強調マークの位置を変えたい場合

text-emphasis-positionプロパティを使うと、強調マークを表示する位置（テキストの上か下か）を指定できます。横書きの場合、既定ではテキストの上側にマークが表示されます。