The text-emphasis-position property sets where emphasis marks are drawn—over or under the text in horizontal writing, and left or right in vertical writing. Like ruby, marks can increase line height when space is tight.
It is inherited. The initial value is auto. It is not part of the text-emphasis shorthand, so style and color can change without resetting position.
text-emphasisThe shorthand never sets position. Use this property when placement must change. Preferred positions often differ by language (e.g. Japanese over, Chinese under).
text-emphasis-position: auto | over | under | [ over | under ] [ right | left ] | initial | inherit;One value: auto, over, or under (missing side defaults to right). Two values: one of over/under plus one of right/left (order does not matter).
| Value | Description | Try it |
|---|---|---|
auto | Default. Over in horizontal; right in vertical | Try it |
over | Marks above the text (horizontal writing) | Try it |
under / under right | Marks below the text (horizontal writing) | Try it |
over left + vertical | Side placement in writing-mode: vertical-rl | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent’s position | Try it |
text-emphasis-positionCreate marks first, then choose where they sit for your writing mode and language.
text-emphasis: filled circle red.over or under.right or left (or rely on auto).under).| Piece | Required? | Role |
|---|---|---|
| Emphasis style | Yes (to see position) | Creates the marks to place |
| Position keyword(s) | Yes | auto, over/under, and optional left/right |
| Writing mode | Context | Controls which keyword pair is visible |
| Shorthand | No | text-emphasis never sets this property |
Marks stay filled circle. Change only where they sit. Switch to vertical mode to see left/right matter more.
Each snippet focuses on text-emphasis-position. A style is included only so placement is visible. Use Try It Yourself for a live editor.
Place marks over horizontal text (common for Japanese).
<style>
.mark {
text-emphasis: filled circle #dc2626;
text-emphasis-position: over;
}
</style>
<p class="mark">重要ポイント</p>over. Marks sit above each character.left/right, browsers assume right.text-emphasis later.Place marks under horizontal text (common for Chinese).
<style>
.mark {
text-emphasis: filled circle #dc2626;
text-emphasis-position: under right;
}
</style>
<p class="mark">重点内容</p>under for horizontal; right for vertical.right under means the same pairing.under is often preferred for Chinese horizontal text.In vertical text, left and right control which side gets the marks.
<style>
.vert {
writing-mode: vertical-rl;
text-emphasis: filled circle #dc2626;
text-emphasis-position: over left;
}
</style>
<p class="vert">縦書き</p>writing-mode: vertical-rl stacks the text.text-emphasis.left moves marks to the left of each glyph.over. The pair stays valid for mixed horizontal/vertical layouts.If marks do not move where you expect, check these first.
Without text-emphasis-style (or the shorthand), there are no marks to place.
Changing text-emphasis leaves this property alone. That is intentional so language position can stay stable.
In horizontal text, focus on over/under. In vertical text, focus on left/right.
If leading is tight, browsers expand the line so marks fit—similar to ruby.
Japanese often uses over; Chinese often uses under. Match reader expectations when you can.
text-emphasis-position is a browser text-decoration property. Node.js, Deno, and Bun do not apply it.
Interoperable across modern browsers since about March 2022. Internet Explorer does not support this property.
Bottom line: Safe for modern sites. Support tracks the text-emphasis family. The auto keyword is newer than over/under; IE has no support.
auto. Inherited. Not part of text-emphasis.over/under for horizontal; left/right for vertical.over; Chinese often under.One line: text-emphasis-position decides which side of the glyph gets the emphasis mark.
Learn the longhand that chooses the mark shape or string.
8 people found this page helpful