text-emphasis

Definition

The text-emphasis CSS property is used to apply emphasis marks to text. Emphasis marks are graphical symbols that can be added to text to convey emphasis, such as highlighting or adding decorative marks.

The text-emphasis property accepts two values:

• text-emphasis-style: Specifies the style or type of emphasis mark to be applied. It can be set to values like none, filled, open, dot, circle, double-circle, triangle, sesame, or filled sesame, among others.
• text-emphasis-color: Specifies the color of the emphasis mark. It can be any valid CSS color value.

Here’s an example:

.emphasized-text {
  text-emphasis: circle;
  text-emphasis-color: red;
}

In this example, the .emphasized-text class applies a circular emphasis mark to the text and sets its color to red.

The available emphasis styles may vary depending on the browser and system. Some browsers may have limited support for certain emphasis styles.

The text-emphasis property is primarily used for decorative or stylistic purposes to draw attention to specific text. It is often employed in typographic styling, such as indicating key terms, citations, or decorative effects in headings or blocks of text.

It’s important to note that the text-emphasis property is not widely supported across all browsers, especially older ones. Therefore, it’s essential to test and consider alternative methods or fallbacks to ensure graceful degradation for unsupported browsers.