CSS text-emphasis-position Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The text-emphasis-position CSS property controls where emphasis marks - the small annotations used in East Asian typography to indicate stress or pronunciation - are drawn relative to the text they annotate. It governs whether those marks are rendered adjacent to the glyph box or displaced into the inter-glyph area, and whether they follow the outer edge of a character or sit closer to the character body. Because emphasis marks are visual-only annotations, this property affects presentation layer layout and alignment rather than document semantics.

Placement set by this property is context-aware: it adapts to the element’s inline formatting and to the writing direction and flow of the text. For example, the way marks are oriented and whether they appear beside or above characters is influenced by the page’s text orientation, so it interacts closely with writing-mode. It is most commonly used together with the emphasis-style and color controls (often via the shorthand text-emphasis) so that both the appearance and the placement of the marks are defined in a cohesive way.

When using this property in production you should keep layout repercussions in mind: emphasis marks can occupy space that affects line metrics and may collide with adjacent glyphs or inline decorations if line-height and spacing are tight. Adjusting the surrounding vertical rhythm - for example by tuning line-height or related spacing - can help avoid overlap and preserve legibility. Also remember emphasis marks are purely visual and typically ignored by assistive technologies, so they should not be relied on to convey critical information that isn’t otherwise available in the document content.

Definition

Initial value: over right
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.textEmphasisPosition

Interactive Demo

text-emphasis-position: over;

text-emphasis-position: under;

The rusty swing set creaked.

Syntax

text-emphasis-position: [ over | under ] && [ right | left ]

Values

overDraw marks over the text in horizontal writing mode.
underDraw marks under the text in horizontal writing mode.
rightDraw marks to the right of the text in vertical writing mode.
leftDraw marks to the left of the text in vertical writing mode.

Example

HTML

<div class="container">

  <p class="over">This text has marks <strong>above</strong> (over).</p>

  

  <p class="under">This text has marks <strong>below</strong> (under).</p>

  

  <p class="combined">This is a <span>special</span> emphasis.</p>

</div>

CSS

/* General styling for visibility */
body {
  font-family: sans-serif;
  line-height: 3; /* Extra spacing to see the marks clearly */
  padding: 20px;
}

/* Base emphasis style */
p {
  text-emphasis-style: circle;
  text-emphasis-color: #e63946;
}

/* Positioning examples */
.over {
  text-emphasis-position: over right;
}

.under {
  text-emphasis-position: under right;
}

/* Applying only to a specific span */
.combined span {
  text-emphasis-style: '★';
  text-emphasis-position: under left;
  text-emphasis-color: #457b9d;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-emphasis-position property. Hover over a browser icon to see the version that first introduced support for this CSS property.