CSStext-emphasis-position Property
Example
Use of the text-emphasis-position property:
h3.ex1 {
text-emphasis: double-circle red;
text-emphasis-position: over;
}
h3.ex2 {
text-emphasis: triangle blue;
text-emphasis-position: under;
}
h3.ex3 {
writing-mode: vertical-rl;
text-emphasis: triangle blue;
text-emphasis-position: under right;
}
h3.ex4 {
writing-mode: vertical-rl;
text-emphasis: triangle blue;
text-emphasis-position: under left;
}
Try it Yourself »text-emphasis: double-circle red;
text-emphasis-position: over;
}
h3.ex2 {
text-emphasis: triangle blue;
text-emphasis-position: under;
}
h3.ex3 {
writing-mode: vertical-rl;
text-emphasis: triangle blue;
text-emphasis-position: under right;
}
h3.ex4 {
writing-mode: vertical-rl;
text-emphasis: triangle blue;
text-emphasis-position: under left;
}
Definition and Usage
Thetext-emphasis-position property specifies the position of the emphasis marks (over, under, left, right).
Tip: Use thewriting-mode property to specify horizontal or vertical writing mode.
| Default value: | over right |
|---|---|
| Inherited: | yes |
| Version: | CSS3 |
| JavaScript syntax: | object.style.textEmphasisPosition="under" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| text-emphasis-position | 99.0 | 99.0 | 46.0 | 7.0 | 85.0 |
CSS Syntax
text-emphasis-position: over|under|left|right|initial|inherit;
| Value | Description | |
|---|---|---|
| over | The emphasis marks are applied over the text (in horizontal writing mode) | Demo ❯ |
| under | The emphasis marks are applied under the text (in horizontal writing mode) | Demo ❯ |
| left | The emphasis marks are applied to the left of the text (in vertical writing mode) | |
| right | The emphasis marks are applied to the right of the text (in vertical writing mode) | |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
