CSS text-emphasis property

Definition and Usage

text-emphasis Property is used to add emphasis marks to text.

text-emphasis Property is text-emphasis-style and text-emphasis-color abbreviation.

Tip:The size of the emphasis mark is about 50% of the font size.

Example

Usage text-emphasis Property:

p.ex1 {
  text-emphasis: filled;
}
p.ex2 {
  text-emphasis: open;
}
p.ex3 {
  text-emphasis: double-circle red;
}
p.ex4 {
  text-emphasis: triangle blue;
}

Try It Yourself

CSS Syntax

text-emphasis: none|filled|open|dot|circle|double-circle|triangle|sesame|string|color|initial|inherit;

Attribute Value

Value Description
none Does not apply the emphasis mark.
filled Fills the emphasis mark with a solid color.
open Emphasizes the mark as hollow.
dot Emphasizes the mark as a small dot.
circle Emphasizes the mark as a circle.
double-circle Emphasizes the mark as a double circle.
triangle Emphasizes the mark as a triangle.
sesame Emphasizes the mark as sesame (i.e., a cluster of small dots).
string Emphasizes the mark with the given string (a character).
color Sets the color of the emphasis mark.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: none currentcolor
Inheritance: yes
Version: CSS3
JavaScript Syntax: object.style.textEmphasis="filled blue"

Browser Support

The numbers in the table represent the browser version that fully supports this attribute for the first time.

Chrome Edge Firefox Safari Opera
99.0 99.0 46.0 7.0 85.0