CSS text-emphasis-position Property

Last Updated : 09 Mar, 2023

The text-emphasis-position property in CSS is used to define the position of the emphasis marks like dots, circles, and lines applied to text. The line height will increases if there isn't enough space for emphasis marks. These marks are used to draw attention to specific text. The emphasis marks are vertically centered with the text by default, but the text-emphasis-position property can be used to change their position.

Syntax:

text-emphasis-position: over | under | right | left;

CSS text-emphasis-position Property: The following properties are used:

over: The emphasis marks are positioned above the text.
under: The emphasis marks are positioned below the text.
left: The emphasis marks are positioned to the left of the text.
right: The emphasis marks are positioned to the right of the text.

Example 1: In this example, we have created two paragraph elements. In the first paragraph element, we applied triangle emphasis and positioned the emphasis over the text. In the second paragraph, we applied circle emphasis and positioned the emphasis under the text.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" 
          content= "width=device-width, 
                    initial-scale=1.0">
    <title>GeeksforGeeks</title>

    <style>
        p {
            width:30rem;
            font-size: 1.5rem;
            padding: 1rem;
        }
        .first {
            text-emphasis: triangle;
            text-emphasis-position: over;
            background-color: rgba(95, 158, 160, 0.602);
        }
        .second {
            text-emphasis: circle;
            text-emphasis-position: under;
            background-color: rgba(255, 127, 80, 0.49);
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <div>
        <h3>text-emphasis-position: over;</h3>
        <p class="first">
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science
            and programming articles
        </p>
        <h3>
            text-emphasis-position: under;
        </h3>
        <p class="second">
            We provide a variety of services 
            for you to learn, thrive and also have fun!
        </p>
    </div>
</body>

</html>

Output:

Example 2: We have changed the direction of the text from horizontal to vertical and used the left and right values with the text-emphasis-position property to position the emphasis left side for the first paragraph and the right side for the second paragraph.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>GeeksforGeeks</title>

    <style>
        p {
            height:25rem;
            font-size: 1.5rem;
            padding: 1rem;
        }

        div{
            display: flex;
        }

        .first {
            writing-mode: vertical-rl;
            text-emphasis: triangle;
            text-emphasis-position: left;
            background-color: rgba(95, 158, 160, 0.602);
        }
        .second {
            writing-mode: vertical-rl;
            text-emphasis: circle;
            text-emphasis-position: right;
            background-color: rgba(255, 127, 80, 0.49);
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <div>
        <h3>
            text-emphasis-position:left;
        </h3>
        <p class="first">
            A Computer Science portal for geeks.
            It contains well written, well thought and 
            well explained computer science
            and programming articles
        </p>
        <h3>
            text-emphasis-position:right;
        </h3>
        <p class="second">
            We provide a variety of services for you 
            to learn, thrive and also have fun!
        </p>
    </div>
</body>

</html>