text‑emphasis CSS Playground - Online Decorative Marks

You have two main options: keyword shapes and custom strings. Keyword shapes include dot (filled dot), circle (open circle), double-circle, triangle, and sesame (a small sesame-seed shape). You can also prefix them with filled or open (e.g., filled triangle, open dot). For custom marks, use a quoted string like '★', '♥', or '◆'. The string typically works best with a single character, though multi-character strings are technically valid (browsers may only use the first character).

While both add visual markings to text, they work differently: text-decoration (underline, overline, line-through) draws a continuous line across the entire text span. text-emphasis places individual marks on each character, making it more granular and character-focused. Text-emphasis marks also automatically adjust their size relative to the font size and respect the text's writing mode. Use text-emphasis when you want per-character decoration, and text-decoration for continuous line-based highlighting.

text-emphasis-position controls whether marks appear over (above) or under (below) the text in horizontal writing modes. In vertical writing modes (like traditional Japanese or Chinese), you can also use left or right. The default is over for horizontal text. Note that this property is not included in the text-emphasis shorthand — it must be declared separately.

text-emphasis-skip controls which characters don't receive emphasis marks. By default, browsers skip spaces and punctuation (spaces punctuation). You can change this to none (marks on every character), spaces (skip only spaces), or punctuation (skip only punctuation). Browser support: Chrome 108+, Firefox 121+, Safari 17.2+, Edge 108+. It's a progressive enhancement — if unsupported, the browser simply uses the default skip behavior.

Yes! You can animate text-emphasis-color smoothly with CSS transitions or @keyframes. For example, you can create a pulsing emphasis effect by animating the color. However, text-emphasis-style is not animatable — you can't smoothly transition between a dot and a star. For dynamic style changes, use JavaScript to swap the value instantly. A common trick is to animate the color while keeping the style fixed, creating an engaging attention-grabbing effect.

Yes, text-emphasis is purely visual and does not affect the document's semantic structure or screen reader output. The underlying text remains fully accessible. Screen readers will read the text normally, ignoring the decorative marks. This makes text-emphasis a safe choice for adding visual emphasis without compromising accessibility — unlike techniques that replace text with images or use pseudo-elements that may confuse assistive technologies.

Choose a color with sufficient contrast against your background. The emphasis marks inherit their size proportionally from the font size — larger text (28px+) makes the marks much more visible. If marks appear too small, increase the font size or use a bolder custom character like '●' (filled bullet) instead of a dot. You can also use this playground's dark background toggle to preview how your emphasis marks look in different themes. For maximum visibility, pair warm colors (red, orange, gold) with light backgrounds, and bright colors (cyan, lime, white) with dark backgrounds.