CSS text-emphasis-style Property

What You’ll Learn

The text-emphasis-style property sets the shape of emphasis marks on text characters — from built-in dots and circles to custom symbols.

Introduction

The text-emphasis-style property in CSS is used to apply emphasis marks to text, which can help to highlight or stress certain parts of the content.

This property is commonly used in East Asian typography, but it can be applied to any text to add stylistic emphasis.

Definition and Usage

Use text-emphasis-style to choose the mark shape drawn on each character. Pair it with text-emphasis-color for color control, text-emphasis-position for placement, or use the text-emphasis shorthand when you want style and color together.

📝 Syntax

The syntax for the text-emphasis-style property is straightforward. You can specify the emphasis mark using predefined keywords or a string:

element {
  text-emphasis-style: style;
}

Here, style can be one of the predefined keywords or a string representing the custom emphasis mark.

Basic Example

p {
  text-emphasis-style: dot;
}

Syntax Rules

• Use keyword values like dot, circle, or sesame for built-in shapes.
• Use none to remove emphasis marks.
• Pass a quoted string for a custom symbol, such as "*".
• The property is inherited, so one rule can style many child elements.

Related Properties

• text-emphasis — shorthand for style and color
• text-emphasis-color — sets the mark color
• text-emphasis-position — sets mark placement over or under text

🎯 Default Value

The default value of the text-emphasis-style property is none, meaning no emphasis marks are applied.

💎 Property Values

The text-emphasis-style property accepts keyword values and custom string symbols.

When to Use text-emphasis-style

text-emphasis-style is the right choice when you need to pick the mark shape without changing color or position:

• East Asian content — Use sesame or dot for traditional emphasis conventions.
• Study materials — Mark vocabulary with circle or dot shapes.
• Creative layouts — Use a custom string symbol for decorative emphasis.
• Reusable themes — Set the style once and change color separately with longhands.

Examples Gallery

In this example, we’ll apply a dot emphasis mark to some text, then explore more emphasis shapes.

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

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

.vocab {
  text-emphasis-style: circle;
  text-emphasis-color: #2563eb;
}

.jp-vocab {
  text-emphasis-style: sesame;
  text-emphasis-color: #059669;
}

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

♿ Accessibility

• Marks are decorative — Use semantic HTML such as <em> or <strong> for meaningful emphasis.
• Avoid overuse — Too many marked characters can reduce readability.
• Screen readers — Emphasis mark shapes are not typically announced.
• Keep contrast clear — Pair styles with readable mark colors via text-emphasis-color.

text-emphasis-style in the family

text-emphasis-style controls mark shape only. Combine it with text-emphasis-color and text-emphasis-position, or use the text-emphasis shorthand for style and color in one declaration.

/* Longhand */
.term {
  text-emphasis-style: dot;
  text-emphasis-color: #dc2626;
  text-emphasis-position: over;
}

/* Shorthand equivalent */
.term {
  text-emphasis: dot #dc2626;
}

💡 Best Practices