The text-emphasis-style property sets the appearance of emphasis marks on each character (except spaces and control characters). It is a longhand of text-emphasis.
It is inherited. The initial value is none. Pair it with text-emphasis-color for color, and text-emphasis-position for placement.
Custom string marks should be a single character. Browsers may truncate or ignore multi-character strings.
text-emphasis-style: none | [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] | <string> | initial | inherit;If neither filled nor open is given, filled is assumed. Default shape is circle in horizontal writing and sesame in vertical writing when only a fill keyword is set.
text-emphasis-stylePick a shape (or string), optionally choose filled vs open, then color the marks if needed.
dot, circle, double-circle, triangle, or sesame.filled or open (default fill is filled).text-emphasis-style: "*".text-emphasis-color, or use the text-emphasis shorthand.| Piece | Required? | Role |
|---|---|---|
| Style keyword / string | Yes (to see marks) | Creates the marks |
| Fill keyword | Optional | filled (default) or open |
| Color | Optional | Separate longhand; defaults to currentColor |
| Position | Optional | Separate property; not reset by style alone |
Color stays red so shape changes are easy to see. Switch styles to compare built-in marks and a string.
Each snippet focuses on text-emphasis-style. Color is optional and kept minimal. Use Try It Yourself for a live editor.
The usual horizontal default shape when marks are turned on.
<style>
.mark {
text-emphasis-style: filled circle;
text-emphasis-color: #dc2626;
}
</style>
<p class="mark">Important</p>filled circle draws solid circles.text-emphasis-color paints the marks red.text-emphasis: filled circle #dc2626 does both at once.Sesame marks are common in East Asian typography, especially vertical text.
<style>
h2 {
text-emphasis-style: sesame;
}
</style>
<h2>重要ポイント</h2>sesame selects sesame marks.open, marks are filled.currentColor until you set a color.Use a single character as the mark.
<style>
.star {
text-emphasis-style: "*";
text-emphasis-color: #ca8a04;
}
</style>
<p class="star">Featured</p>"*" becomes the mark for each letter.text-emphasis-color for contrast."foo" are not reliable across browsers.If marks look wrong or missing, check these first.
none means no marksColor and position do nothing until a non-none style (or shorthand) creates marks.
Do not use multi-character strings. The browser may show only the first grapheme or ignore them.
Missing fill → filled. Shape-only keywords are fine. Fill-only uses circle (horizontal) or sesame (vertical).
A later text-emphasis rule can override this longhand. It still does not reset position.
Emphasis skips spaces and control characters. That is normal, not a bug.
text-emphasis-style 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. Older Safari used a -webkit- prefix; IE has no support.
dot, circle, double-circle, triangle, sesame.none. Inherited. Fill defaults to filled.text-emphasis sets style and color together.One line: text-emphasis-style turns emphasis marks on and chooses their shape.
Learn how to indent the first line of a paragraph.
8 people found this page helpful