CSS text-emphasis-style Property – Specifies the Shape of Emphasis Marks

Definition and Usage

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

This property allows setting one of several supported shapes for text emphasis.

Basic Example

Notes - Related Properties

In addition to the text-emphasis-style property, which sets the shape of emphasis marks, there are other properties related to text emphasis styling. Using the following properties together can help you create more versatile emphasis effects on text:

Related properties of `text-emphasis-style`
`text-emphasis-color`	Sets the color of the emphasis marks.
`text-emphasis`	A shorthand property that sets both the shape and color of the emphasis marks.
`text-emphasis-position`	Sets the position of the emphasis marks relative to the text.

Formal syntax

Values

The text-emphasis-style property accepts the following values, each specifying a different type of emphasis mark applied to the text.

Accepted values for the text-emphasis-style property
`none`	No emphasis marks are applied to the text.
`filled`	Applies a filled-style emphasis mark to the text.
`open`	Applies an open-style emphasis mark (hollow shape) to the text.
`dot`	Uses a dot as the emphasis mark around the text.
`circle`	Uses a circle as the emphasis mark around the text.
`double-circle`	Uses a double circle as the emphasis mark around the text.
`triangle`	Uses a triangle as the emphasis mark around the text.
`sesame`	Uses a sesame dot (a small slash-like mark) as the emphasis mark around the text.
`'custom character'`	Applies the specified character as the emphasis mark. If more than one character is provided, only the first character is used.

Applying Emphasis Marks to Text

The text-emphasis-style 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.

Syntax

CSS

/* Keyword values */
text-emphasis-style: none;            /* No emphasis marks are applied to the text */
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;
text-emphasis-style: open sesame;
text-emphasis-style: sesame open;     /* Order doesn't matter; same as 'open sesame' */

/* Custom mark (single character) */
text-emphasis-style: 'K';
text-emphasis-style: 'k';             /* Case-sensitive */
text-emphasis-style: "K";             /* Double or single quotes both work */
text-emphasis-style: 'Key';           /* If multiple characters are given, only the first is used (e.g., 'K') */
text-emphasis-style: '*';
text-emphasis-style: '\00A9';         /* CSS escape sequence; renders as © */
text-emphasis-style: '&amp;';         /* HTML entity; renders as & */

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

Formal definition

Formal definition of the text-emphasis-style property
Initial value	`none`
Applies to	text
Inherited	yes
Percentages	n/a
Computed value	the keyword `none`, a pair of keywords representing the shape and fill, or a string
Animatable	no

Note: Size of text-emphasis-style Marks
According to the specification, the mark applied by the text-emphasis-style property is rendered at 50% of the element's font-size.

Various Examples

Keyword Value

The following example applies a predefined keyword style for emphasis:

'Custom Character'

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

Using Only `filled` or `open`

When only filled or open is specified (without a shape keyword), the rendering differs depending on whether the text is written horizontally or vertically.

Horizontal Writing Mode

In horizontal writing mode, specifying only open renders as if text-emphasis-style: open dot; was used.

Similarly, if you use only filled, it will render as if you had used text-emphasis-style: filled dot

Vertical Writing Mode

In vertical writing mode, the defaults are different. If you specify only open, it behaves as if text-emphasis-style: open sesame were used.

Likewise, using only filled in vertical writing mode is interpreted as text-emphasis-style: filled sesame.

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-style property
Property	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`text-emphasis-style`	99	99	46	7

Specifications

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

References

MDN - text-emphasis-style