Examples

Japanese Emphasis (Default)

em {
  -webkit-text-emphasis-style: filled dot;
  -webkit-text-emphasis-color: #c53030;
  -webkit-text-emphasis-position: over right;
  text-emphasis-style: filled dot;
  text-emphasis-color: #c53030;
  text-emphasis-position: over right;
}

Chinese Emphasis (Under)

strong {
  text-emphasis-style: filled dot;
  text-emphasis-color: #2b6cb0;
  text-emphasis-position: under right;
}

Sesame Mark (Traditional)

.emphasis {
  text-emphasis-style: filled sesame;
  text-emphasis-color: currentColor;
  text-emphasis-position: over right;
}

Custom Character Mark

.star-emphasis {
  text-emphasis-style: '★';
  text-emphasis-color: #d69e2e;
  text-emphasis-position: over right;
}

.heart-emphasis {
  text-emphasis-style: '♥';
  text-emphasis-color: #d53f8c;
}

Open Circle (Subtle)

.subtle-emphasis {
  text-emphasis-style: open circle;
  text-emphasis-color: #4a5568;
  text-emphasis-position: over right;
}

Double Circle (Important)

.important {
  text-emphasis-style: filled double-circle;
  text-emphasis-color: #9f7aea;
  text-emphasis-position: over right;
}

With Ruby Annotation

ruby {
  text-emphasis-style: filled dot;
  text-emphasis-color: #c53030;
}

ruby rt {
  text-emphasis: none; /* No emphasis on ruby text */
}

Responsive Emphasis

.emphasis {
  /* Hidden on mobile - marks too small */
  text-emphasis: none;
}

@media (min-width: 768px) {
  .emphasis {
    text-emphasis-style: filled dot;
    text-emphasis-color: #c53030;
    text-emphasis-position: over right;
  }
}

CSS Variables

:root {
  --emphasis-color: #c53030;
  --emphasis-style: filled dot;
  --emphasis-position: over right;
}

.emphasis {
  text-emphasis-style: var(--emphasis-style);
  text-emphasis-color: var(--emphasis-color);
  text-emphasis-position: var(--emphasis-position);
}

.emphasis--subtle {
  --emphasis-style: open circle;
  --emphasis-color: #718096;
}

With Line Height Adjustment

.emphasis-container {
  /* Extra line height for emphasis marks */
  line-height: 2;
}

.emphasis-container em {
  text-emphasis-style: filled sesame;
  text-emphasis-position: over right;
}

Print Styles

@media print {
  .emphasis {
    text-emphasis-style: filled dot;
    text-emphasis-color: black;
    text-emphasis-position: over right;
  }
}

Dark Mode

.emphasis {
  text-emphasis-style: filled dot;
  text-emphasis-color: #fc8181;
}

@media (prefers-color-scheme: dark) {
  .emphasis {
    text-emphasis-color: #feb2b2;
  }
}

Reference

text-emphasis-style Values

Value	Description
none	No emphasis marks
filled	Shape is filled with solid color
open	Shape is hollow (outline only)
dot	Small circle (• / ◦)
circle	Large circle (● / ○)
double-circle	Double ring (◉ / ◎)
triangle	Triangle (▲ / △)
sesame	Sesame mark (﹅ / ﹆)
'string'	Custom character in quotes

text-emphasis-position Values

Value	Use Case
over right	Horizontal Japanese (default)
under right	Horizontal Chinese
over left	Horizontal special cases
under left	Horizontal special cases

The second keyword (left/right) affects vertical writing modes only. In horizontal text, both "over right" and "over left" appear above.

East Asian Typography Context

Japanese (日本語): Emphasis marks placed above characters (over right)
Simplified Chinese (简体中文): Marks placed below characters (under right)
Traditional Chinese (繁體中文): Either position acceptable
Korean (한국어): Less common, typically over

Browser Support

Property	Chrome	Firefox	Safari	Edge
text-emphasis-style	99+	46+	7+ (-webkit)	99+
text-emphasis-color	99+	46+	7+ (-webkit)	99+
text-emphasis-position	99+	46+	7+ (-webkit)	99+

Safari requires -webkit- prefix. Always include both prefixed and unprefixed versions.

Shorthand Property

/* text-emphasis: style color */
text-emphasis: filled sesame #c53030;

/* Equivalent to: */
text-emphasis-style: filled sesame;
text-emphasis-color: #c53030;

Position cannot be set via shorthand - use text-emphasis-position separately.

Best Practices

Always include -webkit- prefix for Safari
Use sufficient line-height (1.5-2) to prevent overlap
Consider hiding on small screens (marks may be too small)
Use currentColor for automatic color inheritance
Match position to target language conventions
Test with actual CJK characters
Use semantic elements (em, strong) when appropriate
Ensure sufficient color contrast for accessibility

Common Issues

Marks cut off: Increase line-height or padding
Not showing in Safari: Add -webkit- prefix
Wrong position: Use explicit position value
Marks too small: Increase font size
Custom char not centered: Some chars have inherent offset

CSS Text Emphasis Generator

Presets

Target Element

Emphasis Style

Emphasis Shape

Position

Color

Options

Live Preview

Shape Comparison

Position Demonstration

Generated CSS