CSS text-emphasis-style Property

❮ Previous Reference Next ❯


.example1 {
  text-emphasis-style: filled;

.example2 {
  text-emphasis-style: open;

.example3 {
  text-emphasis-style: double-circle;

.example4 {
  text-emphasis-style: triangle;

Hello World!


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
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.


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;
❮ Previous Reference Next ❯