CSS text-emphasis-color Property

Last Updated : 07 Mar, 2023

The text-emphasis-color CSS property allows us to set the color of the emphasis marks that you can create using the CSS text-emphasis property. The text-emphasis property applies emphasis marks like dots, circles, and lines to the text.

Syntax: Below is the syntax for applying the color to the emphasis marks.

text-emphasis-color: <color>

Property Value:

<color>: This value specifies the color of the emphasis marks. By default, the currentcolor will be the value if no color is present.

You may use different color values like RGB value, and hex value and apply the color to the emphasis.

The following are the necessary CSS properties to create emphasis marks and apply color to them and also positioned the emphasis according to requirements.

text-emphasis: dot | circle | string;
text-emphasis-color: color;
text-emphasis-position:over | under | left | right;

Example 1: We have created a paragraph element and added some content to it. After that, we applied the triangle emphasis mark to this text content using the text-emphasis property then we used the text-emphasis-color property and applied green color to emphasis marks.

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:25rem; 
            font-size: 1.5rem; 
            padding: 1rem; 
        } 
  
        .first {     
            text-emphasis: triangle; 
            text-emphasis-position: over; 
            text-emphasis-color: green; 
            background-color: rgba(95, 158, 160, 0.602); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <div> 
        <h3>text-emphasis-color: green;</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> 
    </div> 
</body> 
</html>

Output:

Example 2: We applied a string (*) emphasis mark to the paragraph’s text content using the CSS text-emphasis property then we used the text-emphasis-color property and applied RGB color to emphasis marks.

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; 
        } 
        .first { 
      
            text-emphasis:'*'; 
            writing-mode: vertical-lr; 
            text-emphasis-color: rgb(0, 26, 255); 
            background-color: rgba(95, 158, 160, 0.602); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
          GeeksforGeeks 
      </h1> 
    <div> 
        <h3> 
              text-emphasis-color: rgb(0, 26, 255); 
          </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> 
    </div> 
</body> 
</html>