CSS text-emphasis Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The text-emphasis CSS property is used to apply emphasis marks or symbols to text in a web page, typically for linguistic or typographic purposes. It allows web developers to enhance the visual presentation of text by adding symbols like dots or dashes above, below, or within characters. This property provides greater control over how emphasis marks are displayed compared to traditional methods like using pseudo-elements or HTML entities. It is particularly useful for languages that require diacritics or accents to indicate stress or pronunciation patterns, as it helps improve readability and aesthetics in typography. Individual properties are: text-emphasis-style and text-emphasis-color.

Initial value: See individual properties
Applies to: All elements
Inherited: Yes
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.textEmphasis

Interactive Demo

text-emphasis: none;

text-emphasis: filled green;

text-emphasis: '^' green;

text-emphasis: filled triangle red;

The rusty swing set creaked.

Syntax

text-emphasis: <text-emphasis-style> || <text-emphasis-color>

Values

<text-emphasis-style>See the text-emphasis-style CSS property for values.
<text-emphasis-color>See the text-emphasis-color CSS property for values.

Example

HTML

<h2>This is important!</h2>

CSS

h2 {
  text-emphasis: triangle #d55;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS text-emphasis property.

Desktop

99	99	46	85	7

Tablets / Mobile

99	46	68	7	18	99

Last updated by CSSPortal on: 2nd January 2024

Support Us