The text-emphasis property is a shorthand that draws emphasis marks on text (except spaces and control characters). It sets text-emphasis-style and text-emphasis-color.
It is inherited. Marks are about half the font size and may increase line height. Unlike text-decoration, emphasis marks apply per character and can change on descendants.
text-emphasis does not reset text-emphasis-position. Style and color change often; position usually stays the same.
text-emphasis: <style> || <color> | initial | inherit;Style can be none, a shape keyword list (filled / open plus dot, circle, and others), or a one-character <string>.
| Value | Description | Try it |
|---|---|---|
none | No emphasis marks (default style) | Try it |
filled / open | Solid or hollow mark. Default fill is filled | Try it |
dot / circle / triangle … | Built-in shapes. Also double-circle, sesame | Try it |
<string> | Custom one-character mark, e.g. "★" | Try it |
<color> | Mark color. Defaults to currentColor | Try it |
initial / inherit | Reset, or take the parent emphasis | Try it |
text-emphasisPick a mark style, optionally a color, and apply it to the text you want to highlight.
dot, circle, triangle, sesame, …) or a one-character string.filled or open, plus a color.text-emphasis: filled sesame #555.text-emphasis-position.| Piece | Required? | Role |
|---|---|---|
| Style | Yes (to see marks) | Shape keywords or a <string> |
| Color | Optional | Defaults to currentColor |
| Position | Optional | Separate property; not part of this shorthand |
| Longhands | Optional | Use when style and color need different cascade rules |
Switch emphasis styles on a short phrase. Marks appear above (or beside) each character.
Each snippet focuses on text-emphasis. Keep CSS lean so the shorthand is easy to study. Use Try It Yourself for a live editor.
Highlight a heading with red triangle marks.
<style>
h2 {
text-emphasis: triangle #dd5555;
}
</style>
<h2>This is important!</h2>triangle selects filled triangles by default.#dd5555 colors the marks, not the text.text-emphasis.Sesame marks are common in vertical East Asian typography.
<style>
.note {
text-emphasis: filled sesame;
}
</style>
<p class="note">重要ポイント</p>filled sesame draws solid sesame marks.text-decoration lines.Use a single character string as the emphasis mark.
<style>
.star {
text-emphasis: "★" #ca8a04;
}
</style>
<p class="star">Featured</p>"★" becomes the mark for each letter.If marks look wrong or missing, check these first.
Emphasis is skipped on spaces and control characters. That is normal, not a bug.
Symbols are about 50% of the font size. Tight leading may clip them or push lines apart.
Do not use multi-character strings like "foo". Browsers may show only the first grapheme.
Setting text-emphasis never clears text-emphasis-position. Change position with that longhand.
For links and strike-throughs, use text-decoration. Emphasis marks are a different typographic tool.
text-emphasis 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. Older Safari supported prefixed forms; unprefixed interoperability is strong today. IE has no support.
dot, circle, double-circle, triangle, sesame, or a string.text-emphasis-position.One line: text-emphasis paints small marks on characters using style and color together.
Learn the longhand that colors emphasis marks on their own.
8 people found this page helpful