CSS text-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 »
Definition and Usage
The text-emphasis-position
property
specifies the position of the emphasis marks (over, under, left, right).
Tip: Use the
writing-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 about initial | |
inherit | Inherits this property from its parent element. Read about inherit |