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
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.
Example
h2 {
text-emphasis-style: sesame;
}
Browser Support
The following table will show you the current browser support for the CSS text-emphasis-style
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
99 | 99 | 46 | 85 | 7 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
99 | 46 | 68 | 7 | 18 | 99 |
Last updated by CSSPortal on: 2nd January 2024