CSS text-emphasis-position Property

What You’ll Learn

The text-emphasis-position property controls where emphasis marks appear relative to text characters — above, below, left, or right.

Introduction

The text-emphasis-position property in CSS allows web developers to specify the position of emphasis marks relative to the text. Emphasis marks are used in East Asian typography to highlight or emphasize characters.

This property is useful for ensuring that the emphasis marks are positioned correctly in relation to the text, enhancing readability and maintaining typographic integrity.

Definition and Usage

Use text-emphasis-position when emphasis marks already exist and you need to control their placement. Set a mark shape first with text-emphasis-style or the text-emphasis shorthand, then choose whether marks appear above or below the text and on the left or right side of each character.

📝 Syntax

The syntax for the text-emphasis-position property is straightforward. It can be applied to any element that supports it, and you can specify the position using predefined keywords:

element {
  text-emphasis-position: position;
}

Here, position can be a combination of the following keywords: over, under, right, and left.

Basic Example

p {
  text-emphasis-style: circle;
  text-emphasis-position: under left;
}

Syntax Rules

• Combine a vertical keyword (over or under) with a horizontal one (left or right).
• If you omit the horizontal keyword, the browser uses the writing-mode default.
• Set an emphasis style before marks become visible.
• The property is inherited, so parent placement can affect child elements.

Related Properties

• text-emphasis — shorthand for style and color
• text-emphasis-style — sets the mark shape or custom symbol
• text-emphasis-color — sets the mark color
• writing-mode — affects which side is considered left or right

🎯 Default Value

The default value of the text-emphasis-position property is over right. This means that the emphasis marks are placed above the text and to the right of the characters in horizontal writing modes.

💎 Property Values

The text-emphasis-position property accepts keyword values that control mark placement.

When to Use text-emphasis-position

text-emphasis-position helps you match typographic conventions and avoid mark collisions:

• East Asian content — Follow regional conventions for where emphasis marks should appear.
• Avoid underline clashes — Move marks above text when underlines or descenders are present.
• Vertical writing — Adjust left/right placement for vertical text layouts.
• Design polish — Fine-tune mark placement for headings, notes, and vocabulary lists.

Examples Gallery

In this example, we’ll position the emphasis marks below and to the left of the text, then explore more placement patterns.

<style>
  p {
    text-emphasis-style: circle;
    text-emphasis-position: under left;
  }
</style>

<h1>Text Emphasis Position Example</h1>
<p>This is an example text with emphasis marks positioned below and to the left.</p>

.vocab-over {
  text-emphasis: dot #dc2626;
  text-emphasis-position: over;
}

.study-term {
  text-emphasis-style: sesame;
  text-emphasis-color: #059669;
  text-emphasis-position: under;
}

.lesson-highlight {
  text-emphasis-style: dot;
  text-emphasis-color: #9333ea;
  text-emphasis-position: over right;
}

♿ Accessibility

• Marks are decorative — Use semantic HTML such as <em> for meaningful emphasis, not mark placement alone.
• Avoid visual clutter — Poor mark placement can make text harder to read for everyone.
• Test with underlines — Ensure marks do not overlap link underlines or other text decorations.
• Screen readers — Emphasis mark position is not typically announced; keep important meaning in the text.

text-emphasis-position in the family

text-emphasis-position controls placement only. Combine it with text-emphasis-style and text-emphasis-color, or use the text-emphasis shorthand for style and color together.

.cjk-term {
  text-emphasis: dot #2563eb;
  text-emphasis-position: under left;
}

💡 Best Practices