CSS text-emphasis-position

The text-emphasis-position property in CSS allows you to specify the position of the text-emphasis style within the text. The text-emphasis property is used to apply emphasis marks to text, such as dots or circles, to make it stand out. By using the text-emphasis-position property, you can control where these emphasis marks appear relative to the text.

The possible values for the text-emphasis-position property are:

over right: emphasis mark appears over and to the right of the text
over left: emphasis mark appears over and to the left of the text
under right: emphasis mark appears under and to the right of the text
under left: emphasis mark appears under and to the left of the text

Let's see some examples of how to use the text-emphasis-position property:

Result:

This is a sample text with emphasis mark over right.


This is a sample text with emphasis mark over right.

Result:

Another example with emphasis mark under left.


Another example with emphasis mark under left.

By using the text-emphasis-position property, you have control over how the emphasis marks are displayed in your text. Experiment with different values to achieve the desired effect in your design.