PLAY CSS
jaen

Text

text-emphasis-position

text-emphasis-position sets which side of the text the emphasis marks (text-emphasis) go on: above or below in horizontal text, right or left in vertical text.

Syntax

[ over | under ] && [ right | left ]?

Preview

Aa
Presets
Drag the bottom-right corner to resize

Code

.box {
  text-emphasis: filled sesame #e66465;
  text-emphasis-position: under;
}

Controls

text-emphasis-positionunder
over | under
right | left
Aa

About

Writing the value

  • over / under: above or below the text in horizontal writing.
  • right / left: to the right or left of the text in vertical writing. It defaults to right when left out.

The initial value is over right (above in horizontal text, right in vertical text), which follows Japanese convention. Horizontal Chinese usually puts the marks below, using under.

Watch out

  • It is not part of the text-emphasis shorthand, so rewriting the shorthand does not reset it.
  • Newer drafts add auto, which picks the side from the language, but browsers such as Chrome do not support it and drop the declaration, so the controls here leave it out.

References

MDN Web Docstext-emphasis-positionSpecificationCSS Text Decoration Module Level 3Can I usetext-emphasis-position
PLAY CSS