CSS text-emphasis Property

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

The rusty swing set creaked.

Syntax

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

Values

Example

<h2>This is important!</h2>
h2 {
  text-emphasis: triangle #d55;
}

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
999946857
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
99466871899

Last updated by CSSPortal on: 2nd January 2024