text-emphasis

The text-emphasis property in CSS, as the name implies, is used to emphasize text in CSS. It does it by applying special marks to an element’s text.

.element {
  text-emphasis: circle red;
}

You might think of text emphasis as italic or bold, but that’s not this! With the special markings of text-emphasis, you can draw attention toward textual elements, such as letters and numbers (but not spaces or control characters). This is commonly used in East Asian languages.

Syntax

The text-emphasis property is a shorthand for setting text-emphasis-style and text-emphasis-color in one declaration.

text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>

Therefore, the syntax is similar to that of a good deal of other shorthand properties, where it holds more than one value:

h2 {
  -webkit-text-emphasis: circle red;
  text-emphasis: circle red;
}

Constituent properties

Let’s look specifically at the text-emphasis-style and text-emphasis-color, the two properties that make up the text-emphasis shorthand.

text-emphasis-style

The text-emphasis-style CSS property is used to set the appearance of emphasis marks. The CSS text emphasis style can be defined as either keyword values or string values.

• Keyword values:
  • filled: The emphasis marks are solid.
  • open: The emphasis marks are outlined but are not filled in with a solid color.
  • dot: The emphasis marks are simple dots, or spots.
  • circle: The emphasis marks are larger solid circles.
  • double-circle: The emphasis marks are larger solid circles with an additional outline around each circle.
  • triangle: The emphasis marks are displayed as triangular points, like arrows pointing upward.
  • sesame: The emphasis marks are displayed as angled lines, like back slashes (\).
  • none: The emphasis marks are not displayed.
• String value : We can provide our own string to use as emphasis marks. It can hold one character that is used as the CSS emphasis symbol, e.g. 'x', '点', '*', etc.

text-emphasis-color

The CSS text-emphasis-color property is used to color the emphasis mark. It’s pretty flexible in terms what color can be used, so we can use named colors, RGB, RGBA, HEX, HSL and HSLA as values.

Note: If you don’t specify the color, CSS text emphasis will use the color of the text.

text-emphasis-position

This isn’t actually part of the shorthand, but it’s worth calling out because it’s common to find yourself adjusting the placement of emphasis marks while defining them.

The text-emphasis CSS property places this emphasis marks at the top of the text by default. The text-emphasis-position CSS property can be used to adjust that placement.

Again, this is commonly used in East Asian languages. The preferred position of emphasis marks depends on the language. In Japanese, for example, the preferred position is over right. In Chinese, on the other hand, the preferred position is under right.

Note: The text-emphasis-position cannot be set with the text-emphasis shorthand property, nor can it be reset either.

The text-emphasis-position CSS property makes use of keyword values such as:

• over: used to draw marks over the text in horizontal writing mode.
• under: used to draw marks under the text in horizontal writing mode.
• right: used to draw marks to the right of the text in vertical writing mode.
• left: used to draw marks to the left of the text in vertical writing mode.

But note that tow values are required for the property to work. So, for example:

text-emphasis-position: over right;
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left

MDN has an informative table that summarizes the preferred emphasis mark positions for Chinese, Mongolian and Japanese. We’ll re-print it here for convenience:

Language	Preferred horiztonal	Preferred vertical
Japanese	over	right
Korean	over	right
Mongolian	under	right
Chinese	under	right

More information

• CSS Text Decoration Module Level 3 specification
• MDN documentation
• Khan Academy demo

Browser support

Related