CSS text-emphasis Property – Shorthand for Emphasis Marks

Definition and Usage

The text-emphasis property specifies the shape and color of emphasis marks applied to the text content of an element.

This property is a shorthand for specifying both the text-emphasis-style property, which sets the shape of emphasis marks, and the text-emphasis-color property, which specifies their color, in a single declaration.

Basic Example

Formal syntax

CSS

selector {
    text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>
    /*  
        These values are for the
        text-emphasis-style and text-emphasis-color properties.
        The order of the specified property values does not matter.
        If a property value is not specified (omitted), the initial value is applied.
    */
}

Syntax

CSS

/* Initial value */
text-emphasis: none; /* No emphasis mark is applied to the text. */

/* Keyword values */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: dot;
text-emphasis: circle;
text-emphasis: double-circle;
text-emphasis: triangle;
text-emphasis: sesame;
text-emphasis: open sesame;
text-emphasis: sesame open; /* The order of the values does not matter. => same as open sesame */

/* 'Custom characters' */
text-emphasis: 'K';
text-emphasis: 'k'; /* Case-sensitive */
text-emphasis: "K"; /* The use of double quotes does not matter */
text-emphasis: 'Key'; /* When more than one character is used, only the first character is displayed. => Only 'K' is displayed */
text-emphasis: '*';
text-emphasis: '\00A9'; /* CSS entities are allowed => displayed as © */
text-emphasis: '&amp;'; /* HTML entities are allowed => displayed as & */

/* Keyword values with color */
text-emphasis: open sesame red;
text-emphasis: filled sesame #00a0e9;

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

Values

The text-emphasis property takes one or more values separated by spaces, which correspond to the values of the text-emphasis-style and text-emphasis-color properties. The order of the specified values does not matter.

Accepted values for the text-emphasis property
`text-emphasis-style`	Sets the shape of emphasis marks.
`text-emphasis-color`	Sets the color of emphasis marks.

Note:
The text-emphasis-position property, which specifies the position of the emphasis mark, cannot be reset using the text-emphasis property, which is a shorthand for specifying both the shape and color of the emphasis mark.

Applying Emphasis Marks to Text

The text-emphasis property applies an emphasis mark once for each typographic character. However, the following characters do not receive emphasis marks:

Spaces: Emphasis marks are not applied to space characters, which are used to separate words.
Control characters: Special characters that control the flow of text (e.g., line breaks, tabs, etc.) do not receive emphasis marks.
Punctuation: Some punctuation marks also do not receive emphasis marks. For example, #, %, @, &, etc.

Note!
The specification mentions the possibility of further updates to the scope of emphasis mark application in the future.

Formal definition

Formal definition of the text-emphasis property
Initial value	For each individual shorthand property: `text-emphasis-style`: `none` `text-emphasis-color`: `currentcolor` (The current text color of the element)
Applies to	all elements
Inherited	yes

Various Examples

Keyword values with Color

The following example applies a predefined keyword style and color for emphasis:

Cautions When Using Keyword and Color Values

If there are two text-emphasis-style values, the text-emphasis-color value cannot be placed between them. As a result, it will not be applied on the screen.

CSS

p span {
    text-emphasis: open red circle;
    /*
        If there are two text-emphasis-style values,
        the text-emphasis-color value cannot be placed between them.
    */
}

'Custom Character'

You can also use a custom character as the emphasis mark:

Important Notes

While the text-emphasis-style property provides a visual emphasis, it may not be conveyed to assistive technologies such as screen readers. For better accessibility, consider using semantic HTML tags (e.g., <strong>, <em>) or the role attribute where appropriate.

Browser compatibility

Browser compatibility for the text-emphasis property
Property	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`text-emphasis`	99	99	46	7

Specifications

Specification for the text-emphasis property
Specification
`text-emphasis`	CSS Text Decoration Module Level 4 #text-emphasis-property