1. css
  2. /properties
  3. /text-emphasis-style

text-emphasis-style

Overview

The text-emphasis-style property specifies the shape and style of the emphasis marks applied to text characters. It's part of the text-emphasis shorthand property, alongside text-emphasis-color. You can independently adjust text-emphasis-style or reset it by using the shorthand.

Examples and Usage

The following examples illustrate a range of text-emphasis-style values. We'll apply a variety of emphasis styles to several sentences, each one emphasizing text with a distinct style.

HTML Structure

<p class="filled">Filled Style</p>

<p class="open">Open Style</p>

<p class="dot">Dot Style</p>

<p class="circle">Circle Style</p>

<p class="double-circle">Double Circle Style</p>

<p class="triangle">Triangle Style</p>

<p class="sesame">Sesame Style</p>

<p class="string">String Style</p>

CSS Styling

.filled {
/* Filled circle emphasis marks are applied. */
  text-emphasis-style: filled; 
}

.open {
/* Open circle emphasis marks are applied. */
  text-emphasis-style: open; 
}

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

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

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

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

.sesame {
/* Sesame-shaped emphasis marks are applied. */
  text-emphasis-style: sesame; 
}

.string {
/* A custom string ("*") is applied as an emphasis mark. */
  text-emphasis-style: "*"; 
}

The example above displays each paragraph (<p> element) with a unique emphasis style, mirroring their class names with the corresponding text-emphasis-style value in the CSS. We've also included a custom string as an emphasis mark, shown in the .string class. While these examples make use of straightforward English text, text-emphasis-style is predominantly used for emphasizing text in East Asian languages.

Values

The text-emphasis-style property accepts the following values:

ValueDescription
noneNo emphasis marks are displayed.
filledSolid, color-filled emphasis marks are displayed. It's the default if filled and open aren't specified.
openHollow emphasis marks are displayed.
dotSmall circles ( U+2022 filled, U+25E6 open) are displayed as emphasis marks.
circleLarge circles ( U+25CF filled, U+25CB open) are displayed as emphasis marks.
double-circleDouble circles ( U+25C9 filled, U+25CE open) are displayed as emphasis marks.
triangleTriangles ( U+25B2 filled, U+25B3 open) are displayed as emphasis marks.
sesameSesame shapes ( U+FE45 filled, U+FE46 open) are displayed as emphasis marks.
stringThe specified string (single character) is displayed as an emphasis mark.

Associated Properties

  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-decoration (with related properties from the CSS Text Decoration Module)

Tips and Tricks

  • text-emphasis-style is beneficial in East Asian languages where text emphasis marks are commonly used. It can also be applied to emphasize text in English and other languages, though less commonly.

  • When using a custom string as an emphasis mark via the string value, ensure it's a single character. Multi-character strings won't display as intended.

  • Certain emphasis styles could cause overflow if there isn't enough line spacing (leading). For instance, larger styles like double-circle might require more space.

  • For better browser compatibility, consider using vendor prefixes (-webkit-) for older versions of Chrome, Edge, and Opera. This practice ensures consistent rendering of your styles across various browsers.

Browser Compatibility

Older versions of Chrome (25-98), Edge (79-98), and Opera (15-84), require vendor prefixes for proper functioning. For more details, refer to the first link in the Useful Resources below.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYes*Yes*Yes*Yes*Yes*No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: text-emphasis-style

W3C's Editor's Draft of CSS Text Decoration Module Level 3: text-emphasis-style