CSS text-emphasis-position Property – Specifies the Position of Emphasis Marks

Definition and Usage

The text-emphasis-color property specifies the color of emphasis marks applied to the text content of an element, as set by the text-emphasis-style property.

This property allows setting the emphasis marks in positions other than the default.

Basic Example

Notes - Related Properties

In addition to the text-emphasis-position property, which sets the position of emphasis marks, there are other properties related to text emphasis styling. Using the following properties together can help you create more versatile emphasis effects on text:

Related properties of `text-emphasis-position`
`text-emphasis-style`	Sets the shape of emphasis marks.
`text-emphasis-color`	Sets the color of emphasis marks.
`text-emphasis`	A shorthand property that sets both the shape and color of the emphasis marks.

Note!
The text-emphasis-position property cannot be reset using the shorthand text-emphasis, which only sets the style and color of emphasis marks.

Formal syntax

CSS

/* 
    [ over | under ]:
    Specifies the vertical position of the emphasis marks.
    This part is required.

    [ right | left ]?:
    Specifies the horizontal position of the emphasis marks.
    This part is optional.
    If omitted, the initial value "right" is used.
*/
selector {
    text-emphasis-position: [ over | under ] && [ right | left ]?;
}

Formal definition

Formal definition of the text-emphasis-position property
Initial value	`over right`
Applies to	text
Inherited	yes
Percentages	n/a
Computed value	specified keyword(s)
Animatable	no

Values

Accepted values for the text-emphasis-position property
`over`	Draws the emphasis mark above the text in horizontal writing mode.
`under`	Draws the emphasis mark below the text in horizontal writing mode.
`right`	Draws the emphasis mark to the right of the text in vertical writing mode.
`left`	Draws the emphasis mark to the left of the text in vertical writing mode.

`over` | `under`

Specifies the vertical position of the emphasis mark in horizontal writing mode. The over value places the mark above the text, while under places it below.

This value is required. The initial value is over.

`right` | `left`

Specifies the horizontal position of the emphasis mark in vertical writing mode. The right value draws the marks to the right of the text, while left draws them to the left. This positioning was designed specifically to control emphasis marks for vertical writing modes used in Asian languages such as Japanese, Korean, Chinese, and Mongolian.

This value is optional. The initial value is right.

Note!
The preferred position of emphasis marks varies by language. For instance, in Japanese, the preferred position is over right, while in Chinese, it is under right.

Practical Examples

Optional `[ right | left ]` Keywords

CSS

p span {
    text-emphasis-style: "z";
    text-emphasis-color: red;
    text-emphasis-position: under; /* The [ right | left ] keywords are optional and can be omitted */
    font-size: 1.5em;
}

Vertical Writing Mode

CSS

p span {
    writing-mode: vertical-rl; /* Vertical writing mode */
    text-emphasis-style: dot;
    text-emphasis-color: red;
    text-emphasis-position: over left;
    font-size: 1.5em;
}

Things to Keep in Mind

CSS When using [ right | left ], you must also specify a [ over | under ] value. Otherwise, the property will not be applied.

p span {
    writing-mode: vertical-rl; /* Vertical writing mode */
    text-emphasis-style: dot;
    text-emphasis-color: red;
    text-emphasis-position: left; /* Will not apply */
    font-size: 1.5em;
}

Browser compatibility

Browser compatibility for the text-emphasis-position property
Property	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`text-emphasis-position`	99	99	46	7

Specifications

Specification for the text-emphasis-position property
Specification
`text-emphasis-position`	CSS Text Decoration Module Level 4 #text-emphasis-position-property

References

MDN - text-emphasis-position