CSS text-emphasis-style Property
Example
.example1 {
text-emphasis-style: filled;
}
.example2 {
text-emphasis-style: open;
}
.example3 {
text-emphasis-style: double-circle;
}
.example4 {
text-emphasis-style: triangle;
}Hello World!
Meaning
The text-emphasis-style property sets the appearance of emphasis marks. It can also be set, and reset, using the text-emphasis shorthand.
| Default value: | none |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
text-emphasis-style: none|filled|open|dot|circle|double-circle|triangle|sesame|string|initial|inherit|revert|revert-layer|unset;Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| none | This is default value. No emphasis marks. |
| filled | The shape is filled with solid color. If neither filled nor open is present, this is the default. |
| open | The shape is hollow. |
| dot | Display small circles as marks. The filled dot is '•' (U+2022), and the open dot is '◦' (U+25E6). |
| circle | Display large circles as marks. The filled circle is '●' (U+25CF), and the open circle is '○' (U+25CB). |
| double-circle | Display double circles as marks. The filled double-circle is '◉' (U+25C9), and the open double-circle is '◎' (U+25CE). |
| triangle | Display triangles as marks. The filled triangle is '▲' (U+25B2), and the open triangle is '△' (U+25B3). |
| sesame | Display sesames as marks. The filled sesame is '﹅' (U+FE45), and the open sesame is '﹆' (U+FE46). |
| string | Display the given string as marks. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
text-emphasis-style: none;
}