CSS text-emphasis-position attribute

Definition and Usage

text-emphasis-position Property specifies the position of emphasis marks (top, bottom, left, right).

Tip:Usage writing-mode Use this property to specify horizontal or vertical writing mode.

Example

Usage text-emphasis-position Property:

h3.ex1 {
  text-emphasis: double-circle red;
  text-emphasis-position: over;
}
h3.ex2 {
  text-emphasis: triangle blue;
  text-emphasis-position: under;
}
h3.ex3 {
  writing-mode: vertical-rl;
  text-emphasis: triangle blue;
  text-emphasis-position: under right;
}
h3.ex4 {
  writing-mode: vertical-rl;
  text-emphasis: triangle blue;
  text-emphasis-position: under left;
}

Try It Yourself

CSS Syntax

text-emphasis-position: over|under|left|right|initial|inherit;

Property Value

Value Description
over Apply emphasis marks above the text (in horizontal writing mode).
under Apply emphasis marks under the text (in horizontal writing mode).
left Apply emphasis marks to the left of the text (in vertical writing mode).
right Apply emphasis marks to the right of the text (in vertical writing mode).
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: over right
Inheritance: yes
Version: CSS3
JavaScript Syntax: object.style.textEmphasisPosition="under"

Browser Support

The numbers in the table indicate the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
99.0 99.0 46.0 7.0 85.0