CSS text-emphasis-style Property

Description

The text-emphasis-style CSS property is used to specify the style of emphasis marks applied to text, typically for highlighting or drawing attention to specific words or characters within a block of text. Emphasis marks can include dots, circles, or other custom symbols. By using this property, web developers can enhance the visual presentation of their text content, making it more engaging and informative for readers. This property works in conjunction with the text-emphasis-color property, which defines the color of the emphasis marks, allowing for fine-grained control over text emphasis styling in CSS.

Initial value: none
Applies to: All elements
Inherited: Yes
Computed value: 'none', a pair of keywords representing the shape and fill, or a string
Animatable: No
JavaScript syntax: object.style.textEmphasisStyle

Interactive Demo

text-emphasis-style: circle;

text-emphasis-style: circle open;

text-emphasis-style: '=';

text-emphasis-style: double-circle filled;

The rusty swing set creaked.

Syntax

text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>

Values

noneNo emphasis marks.
filledThe shape is filled with solid color.
openThe shape is hollow.
dotDisplay small circles as marks. The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.
circleDisplay large circles as marks. The filled circle is U+25CF '●', and the open circle is U+25CB '○'.
double-circleDisplay double circles as marks. The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.
triangleDisplay triangles as marks. The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.
sesameDisplay sesames as marks. The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.
<string>Display the given string as marks. Authors should not specify more than one character in [string]. The UA may truncate or ignore strings consisting of more than one grapheme cluster.