text-emphasis

text-emphasis paints emphasis marks beside text characters, a convention used in East Asian typography. It sets mark style and color; it does not add the semantic meaning of em or strong.

Compare filled and open marks

Both examples use the same text. Filled dots are solid; open circles are hollow. Spaces and control characters do not receive marks.

<p class="filled" lang="ja">重要な例</p>
<p class="open" lang="ja">重要な例</p>

p {
  font-size: 1.5rem;
  line-height: 2;
}
.filled {
  text-emphasis: filled dot #2563eb;
}
.open {
  text-emphasis: open circle #2563eb;
}

Combine semantic importance with typographic marks

Strong identifies importance in HTML. The CSS adds marks while the sentence remains meaningful if marks are unsupported.

<p lang="ja"><strong>注意</strong>：入力内容を確認してください。</p>

p {
  font-size: 1.5rem;
  line-height: 2;
}
strong {
  text-emphasis: filled sesame #172554;
}

Syntax and resets

The shorthand sets text-emphasis-style and text-emphasis-color, both inherited. Omitted style resets to none and omitted color to currentColor. Choose filled/open with dot, circle, double-circle, triangle, or sesame. A quoted single grapheme can supply a custom mark. With filled/open but no shape, the default shape depends on writing mode: circle horizontally, sesame vertically.

Text-emphasis-position is separate from this shorthand. The marks may increase the necessary line box height; do not clip them with a tightly constrained container.

Common mistakes

Do not treat every emphasis style as a decorative substitute for meaningful text or semantic importance. Do not assume an older prefixed implementation supports every value unprefixed. Inspect the compatibility table and actual target font; marks and spacing depend on typographic context.

Learn em, strong, and writing-mode.

Sources and browser support

MDN: text-emphasis describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.