CSS text-emphasis Property

What You’ll Learn

The text-emphasis property adds decorative marks to text characters — a shorthand for setting both the mark shape and its color.

Introduction

The text-emphasis property in CSS is used to apply emphasis marks to text, which is commonly used in East Asian typography. These emphasis marks can be shapes such as dots, circles, or custom symbols, and they are placed alongside the text to highlight or emphasize it.

This property is useful for enhancing the readability and visual appeal of your text content, especially when italics or boldface are not the best cultural fit.

Definition and Usage

Use text-emphasis when you want small decorative marks drawn on each character. It is the shorthand for text-emphasis-style and text-emphasis-color. Pair it with text-emphasis-position when you need to control whether marks appear above or below the text.

📝 Syntax

The text-emphasis property is a shorthand for setting text-emphasis-style and text-emphasis-color. The basic syntax is as follows:

element {
  text-emphasis: emphasis-style emphasis-color;
}

• emphasis-style — Defines the shape and fill of the emphasis mark.
• emphasis-color — Defines the color of the emphasis mark.

Basic Example

p {
  text-emphasis: dot red;
}

Syntax Rules

• Write the style first, then the color: text-emphasis: circle #2563eb;
• Use none to remove emphasis marks.
• Omit the color to inherit from the element’s color value.
• Use longhand properties when you only need to change style or color separately.

Related Properties

• text-emphasis-style — sets the mark shape or custom symbol
• text-emphasis-color — sets the mark color
• text-emphasis-position — sets whether marks appear over or under text

🎯 Default Value

The default value of the text-emphasis property is none, which means no emphasis marks are applied to the text.

💎 Property Values

The text-emphasis property accepts a style keyword or custom string, plus an optional color value.

Emphasis Style

Emphasis Color

When to Use text-emphasis

text-emphasis is the right choice when character-level marks communicate emphasis better than bold or italic:

• East Asian content — Common in Japanese, Chinese, and Korean educational or editorial layouts.
• Study notes — Mark important vocabulary words in language-learning pages.
• Editorial design — Add decorative emphasis without changing font weight.
• Multilingual sites — Match typography conventions for each language section.

Examples Gallery

In this example, we’ll apply a dot emphasis mark to a paragraph of text in red color, then explore more emphasis patterns.

<style>
  p {
    text-emphasis: dot red;
  }
</style>

<h1>Text with Emphasis Mark</h1>
<p>This paragraph has an emphasis mark applied to it.</p>

.vocab {
  text-emphasis: circle #2563eb;
  font-size: 1.125rem;
}

.jp-note {
  text-emphasis: sesame #059669;
  text-emphasis-position: over;
}

.star-emphasis {
  text-emphasis: "*" #ea580c;
}

♿ Accessibility

• Do not rely on marks alone — Emphasis marks are decorative. Use semantic HTML such as <em> or <strong> for meaningful emphasis.
• Keep contrast readable — Choose mark colors that stand out against the text and background.
• Test with screen readers — Emphasis marks may not be announced, so important meaning should stay in the text itself.
• Avoid overuse — Too many marked characters can reduce readability.

text-emphasis in the family

text-emphasis combines style and color in one declaration. Use the longhand properties when you only need to change one part, and add text-emphasis-position when marks should appear above or below the text.

.highlight-term {
  text-emphasis-style: dot;
  text-emphasis-color: #dc2626;
  text-emphasis-position: under;
}

💡 Best Practices