CSStext-emphasis Property
Example
Use of the text-emphasis property:
p.ex1 {
text-emphasis: filled;
}
p.ex2 {
text-emphasis: open;
}
p.ex3 {
text-emphasis: double-circle red;
}
p.ex4 {
text-emphasis: triangle blue;
}
Try it Yourself »text-emphasis: filled;
}
p.ex2 {
text-emphasis: open;
}
p.ex3 {
text-emphasis: double-circle red;
}
p.ex4 {
text-emphasis: triangle blue;
}
Definition and Usage
Thetext-emphasis property is used to apply emphasis marks to text.
Thetext-emphasis property is a shorthand fortext-emphasis-style andtext-emphasis-color.
Tip: The size of the emphasis marks is about 50% of the size of the font.
| Default value: | none currentcolor |
|---|---|
| Inherited: | yes |
| Version: | CSS3 |
| JavaScript syntax: | object.style.textEmphasis="filled blue" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| text-emphasis | 99.0 | 99.0 | 46.0 | 7.0 | 85.0 |
CSS Syntax
text-emphasis: none|filled|open|dot|circle|double-circle|triangle|sesame|string|color|initial|inherit;
| Value | Description | |
|---|---|---|
| none | No emphasis marks are applied | Demo ❯ |
| filled | The emphasis marks are filled with a solid color | Demo ❯ |
| open | The emphasis marks are hollow | Demo ❯ |
| dot | The emphasis marks are small circles | Demo ❯ |
| circle | The emphasis marks are circles | Demo ❯ |
| double-circle | The emphasis marks are double circles | Demo ❯ |
| triangle | The emphasis marks are triangles | Demo ❯ |
| sesame | The emphasis marks are sesames | Demo ❯ |
| string | The emphasis marks are the given string (one character) | Demo ❯ |
| color | Sets the color of the emphasis marks | Demo ❯ |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
