CSS Text Emphasis Style

Syntax and Basic Usage

The text-emphasis-style property accepts keyword values, string values, or global values. The initial value is none, meaning no emphasis marks appear by default. This property is inherited, so it will cascade to child elements unless explicitly overridden.

Basic Syntax

/* Keyword values */
text-emphasis-style: none;
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: sesame;

/* Custom string value */
text-emphasis-style: "★";
text-emphasis-style: "•";

/* Global values */
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: revert;
text-emphasis-style: unset;

Shorthand Property

The text-emphasis shorthand combines style and color into a single declaration, streamlining code for common use cases. This is particularly useful when you want to apply both style and color simultaneously without writing multiple declarations:

/* Shorthand: style and color */
text-emphasis: circle red;
text-emphasis: triangle filled blue;

/* Equivalent longhand */
text-emphasis-style: circle;
text-emphasis-color: red;

Using the shorthand is appropriate when setting both properties simultaneously. The longhand properties offer more granular control and are preferable when only one aspect needs modification, such as changing emphasis color without affecting the existing style.

When using text-emphasis-style, the marks appear at the default position (over the text in horizontal writing modes) unless modified by the text-emphasis-position property. For complete control over emphasis styling, you may need to specify both position and style/color combinations depending on your use case.

Position Property

The text-emphasis-position property controls where emphasis marks appear relative to the text baseline. In horizontal writing modes, marks can appear above (over) or below (under) the text. In vertical writing modes (common for East Asian content), marks appear to the right or left of the text. This positioning is crucial for both typographic correctness and visual appeal in multilingual applications.

For more details on positioning, see the Positioning Emphasis Marks section below.

Built-in Style Values

Dot Styles

The dot keyword displays small circular marks above or below text. The filled dot uses the bullet character (U+2022), while the open variant uses a smaller circle (U+25E6). This style provides subtle emphasis suitable for light marking of important terms or phrases in technical documentation or educational content.

/* Small dot emphasis */
.emphasis-dot {
 text-emphasis-style: dot;
}

/* Colored dots for contrast */
.emphasis-dot-colored {
 text-emphasis-style: dot;
 text-emphasis-color: #2563eb;
}

The dot style works well for marking keywords in technical documentation, highlighting terms in educational content, or providing gentle emphasis without the visual weight of larger marks.

Circle Styles

The circle keyword produces larger circular marks, with filled circles using the black circle character (U+25CF) and open circles using the white circle character (U+25CB). This medium-weight emphasis is more visible than dots while remaining unobtrusive.

/* Large circle emphasis */
.emphasis-circle {
 text-emphasis-style: circle;
}

/* Open circles for lighter emphasis */
.emphasis-circle-open {
 text-emphasis-style: open circle;
}

Circle emphasis strikes a balance between visibility and subtlety, making it versatile for both formal typographic applications and creative design elements.

Double Circle Styles

The double-circle keyword renders marks with an additional concentric circle, using the fisheye character (U+25C9) for filled and bullseye (U+25CE) for open variants. This more complex shape provides stronger visual emphasis suitable for marking important passages.

/* Double circle emphasis */
.emphasis-double-circle {
 text-emphasis-style: double-circle;
}

Double circles create a distinctive visual marker that stands out more than simple circles, appropriate for highlighting key points or creating decorative typographic effects.

Triangle Styles

The triangle keyword displays upward-pointing triangular marks, using the black up-pointing triangle (U+25B2) for filled and the white version (U+25B3) for open. This shape naturally draws attention upward, making it suitable for marking content that leads to conclusions or important takeaways.

/* Triangle emphasis */
.emphasis-triangle {
 text-emphasis-style: triangle;
}

/* Filled triangles for stronger emphasis */
.emphasis-triangle-filled {
 text-emphasis-style: filled triangle;
}

Triangular emphasis marks work well in educational contexts, marking key terms, or creating visually interesting text decorations in creative web designs.

Sesame Styles

The sesame keyword produces the smallest emphasis marks, using the sesame dot characters (U+FE45 for filled, U+FE46 for open). Originally designed for Japanese typography, sesame marks provide very subtle emphasis suitable for extensive text marking without overwhelming the visual presentation.

/* Sesame emphasis */
.emphasis-sesame {
 text-emphasis-style: sesame;
}

/* Open sesame for minimal visual weight */
.emphasis-sesame-open {
 text-emphasis-style: open sesame;
}

Sesame marks offer the most subtle emphasis option, valuable when marking multiple terms or phrases across longer passages of text.

Filled vs Open Variants

Each shape keyword (except none) can be prefixed with filled or open to control whether the mark is solid or hollow. When neither is specified, filled is the default. Open shapes provide a lighter visual weight and can improve legibility in certain contexts, particularly when combined with dark text colors:

/* Filled shapes (default when not specified) */
text-emphasis-style: filled dot;
text-emphasis-style: filled circle;
text-emphasis-style: filled triangle;
text-emphasis-style: filled sesame;

/* Open/hollow shapes */
text-emphasis-style: open dot;
text-emphasis-style: open circle;
text-emphasis-style: open triangle;
text-emphasis-style: open sesame;

Custom String Values

Beyond built-in keywords, text-emphasis-style accepts any single character as a custom emphasis mark. This opens creative possibilities for branding, thematic styling, or implementing language-specific marks not covered by the standard keywords.

/* Star emphasis */
text-emphasis-style: "★";

/* Heart emphasis */
text-emphasis-style: "♥";

/* Middle dot for subtle emphasis */
text-emphasis-style: "·";

/* Custom symbol */
text-emphasis-style: "●";

Best Practices for Custom Marks

When using custom string values, consider these guidelines to ensure consistent rendering and accessibility:

• Use single characters: The specification recommends using only one character per emphasis mark. Browsers may truncate or ignore strings containing multiple grapheme clusters.

• Choose appropriate glyphs: Select characters that render clearly at small sizes and complement the typeface. Avoid overly complex characters that may render poorly across different operating systems.

• Test across browsers: While modern browsers support custom string values, rendering may vary slightly between browsers. Always test your custom marks in Chrome, Firefox, Safari, and Edge.

• Consider accessibility: Custom marks should not interfere with reading comprehension and should maintain sufficient contrast against the text.

/* Accessible custom mark example */
.emphasis-accessible {
 text-emphasis-style: "·"; /* Middle dot is widely supported */
 text-emphasis-color: currentColor; /* Use current text color */
 text-emphasis-position: under; /* Position below for better readability */
}

Custom emphasis marks are particularly useful for branded text emphasis in marketing materials, thematic styling in creative web applications, language-specific marks not covered by built-in keywords, and decorative text treatments in editorial design.

For complex typographic needs across your web application, combining text-emphasis with other CSS properties like letter-spacing and text-decoration creates comprehensive text styling solutions.

Positioning Emphasis Marks

The text-emphasis-position property controls where emphasis marks appear relative to the text baseline. This positioning is crucial for both typographic correctness and visual appeal in your web applications.

Horizontal Writing Mode Positions

In horizontal writing modes (the default for most Western content), marks can appear above or below the text:

/* Position above text (default in some contexts) */
text-emphasis-position: over;

/* Position below text (default for Chinese, Mongolian) */
text-emphasis-position: under;

/* Specify both for explicit control */
text-emphasis-position: over right;

Vertical Writing Mode Positions

In vertical writing modes (common for East Asian content), marks appear to the right or left of the text:

/* Position to right of text (default for Japanese, Korean) */
text-emphasis-position: right;

/* Position to left of text */
text-emphasis-position: left;

Language-Specific Conventions

Different languages have established conventions for emphasis mark positioning:

When building multilingual applications, consider these conventions for language-appropriate rendering:

/* Japanese content */
.ja-content {
 text-emphasis-style: filled circle;
 text-emphasis-position: over;
}

/* Chinese content */
.zh-content {
 text-emphasis-style: filled circle;
 text-emphasis-position: under;
}

Combining Position with Style

The shorthand property text-emphasis does not include position, so it must be set separately:

/* Complete emphasis styling */
.emphasis-complete {
 text-emphasis: circle red; /* Style and color */
 text-emphasis-position: over; /* Position */
}

For developers implementing internationalization features, proper emphasis positioning demonstrates attention to language-specific typographic details that users appreciate.

Browser Support and Compatibility

Text-emphasis-style enjoys broad browser support as a Baseline feature, meaning it works across all major browsers and has been widely available since March 2022. This makes it safe to use in production applications without extensive polyfill requirements.

Current Browser Support

• Chrome/Edge: Full support since version 62 (2017)
• Firefox: Full support since version 45 (2016)
• Safari: Full support since version 7.1 (2014)
• Opera: Full support since version 49 (2017)

According to MDN Web Docs, this property has achieved universal adoption among modern browsers, making it a reliable choice for production web applications.

Vendor Prefixes

While modern browsers no longer require prefixes, older versions may need -webkit- prefix for maximum compatibility with users on older browser versions:

/* Maximum compatibility */
.emphasis-compatible {
 -webkit-text-emphasis-style: circle;
 text-emphasis-style: circle;
}

Consider whether prefixing is necessary based on your target browser statistics and analytics data.

Fallback Strategies

For environments where text-emphasis is not supported, consider these progressive enhancement approaches:

/* CSS feature detection */
@supports (text-emphasis-style: circle) {
 .emphasis-fallback {
 text-emphasis-style: circle;
 text-emphasis-color: #2563eb;
 }
}

/* Gradient-based fallback for older browsers */
.emphasis-fallback {
 background: linear-gradient(to bottom, transparent 85%, #2563eb 85%, #2563eb 90%, transparent 90%);
 background-size: 100% 1.2em;
}

Feature detection using @supports allows progressive enhancement while maintaining visual emphasis for unsupported browsers.

Performance Considerations

Text-emphasis-style is a CSS property with minimal performance impact because it leverages the browser's native text rendering engine. Understanding its performance characteristics helps you make informed decisions about when and how to use it in performance-critical applications.

Rendering Performance

Text emphasis marks render as part of the text layer and do not create additional layout nodes. This means:

• No JavaScript execution required - Pure CSS solution that runs on the browser's compositor thread
• Renders with native browser text rendering - Leverages the same rendering pipeline as regular text
• No layout recalculation after initial render - Changes to emphasis style are purely visual
• Hardware accelerated alongside regular text - Benefits from GPU acceleration when available

Optimization Tips

For applications with many text emphasis instances, these strategies can improve maintainability and performance:

/* Use CSS custom properties for consistent styling */
:root {
 --emphasis-style: circle;
 --emphasis-color: currentColor;
 --emphasis-position: under;
}

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

/* Batch similar emphasis styles */
.shared-emphasis {
 text-emphasis-style: circle;
 text-emphasis-color: #2563eb;
}

.shared-emphasis.special {
 text-emphasis-color: #dc2626; /* Only change color */
}

Using CSS custom properties and shared classes reduces stylesheet size and improves maintainability without sacrificing rendering performance. This approach also makes it easier to implement consistent theming across your entire application.

For developers focused on CSS performance optimization, text-emphasis-style demonstrates how modern CSS properties can enhance visual design without compromising load times or rendering speed.

Practical Examples

Highlighting Key Terms

/* Educational content key terms */
.key-term {
 text-emphasis-style: dot;
 text-emphasis-color: #2563eb;
 text-emphasis-position: under;
}

/* Marketing call-to-action */
.cta-emphasis {
 text-emphasis-style: filled triangle;
 text-emphasis-color: #dc2626;
}

Editorial Styling

/* Book review highlights */
.review-highlight {
 text-emphasis-style: sesame;
 text-emphasis-color: #059669;
}

/* Article pull quotes */
.pull-quote {
 text-emphasis-style: circle;
 text-emphasis-color: #7c3aed;
 text-emphasis-position: over;
}

Multilingual Application

/* Japanese content styling */
.ja-text {
 text-emphasis-style: filled circle;
 text-emphasis-position: over;
}

/* Chinese content styling */
.zh-text {
 text-emphasis-style: filled circle;
 text-emphasis-position: under;
}

Creative Design Effects

/* Decorative heading emphasis */
.heading-emphasis {
 text-emphasis-style: "★";
 text-emphasis-color: #f59e0b;
 font-size: 1.5em;
}

/* Subtle paragraph emphasis */
.subtle-emphasis {
 text-emphasis-style: open sesame;
 text-emphasis-color: #6b7280;
}

Complete Component Example

For a reusable emphasis component in your design system:

/* Design system emphasis component */
.emphasis-mark {
 text-emphasis-style: var(--emphasis-style, circle);
 text-emphasis-color: var(--emphasis-color, currentColor);
 text-emphasis-position: var(--emphasis-position, under);
}

/* Variant classes */
.emphasis-mark.subtle {
 --emphasis-style: open sesame;
 --emphasis-color: #6b7280;
}

.emphasis-mark.important {
 --emphasis-style: filled double-circle;
 --emphasis-color: #dc2626;
}

These examples demonstrate how text-emphasis-style can be integrated into various aspects of modern web application development, from educational platforms to creative design systems.

Sources

1. MDN Web Docs - text-emphasis-style - Primary reference for syntax, values, formal definition, and browser support data
2. CSS-Tricks - text-emphasis - Practical examples, CodePen demos, and implementation guidance
3. W3C CSS Text Decoration Module Level 4 - Official specification for text-emphasis property