CSS | text-decoration-skip-ink Property

The text-decoration-skip-ink property is used to specify how the underlines and overlines are rendered when they pass through the characters or glyphs.

Syntax:

text-decoration-skip-ink: auto | none

Property Values:

auto: This value is used to specify to skip the underlines and overlines that pass through a character. It is the default value.
none: This value is used to specify to not skip the underlines and overlines that pass through a character. It would cut through the characters like ‘g’ and ‘t’.

Below examples illustrate the CSS text-decoration-skip-ink property:

Example 1: In this example, we will use text-decoration-skip-ink: auto; property value.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | text-decoration-skip-ink 
    </title> 
    <style> 
        .skip-ink-auto { 
            font-size: 2em; 
            text-decoration: underline green; 
            
            /* text decoration-skip-ink effect */ 
            text-decoration-skip-ink: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
  
        <b> 
            CSS | text-decoration-skip-ink: auto; 
        </b> 
  
        <div class="skip-ink-auto"> 
            A Computer Science portal for geeks 
        </div> 
    </center> 
</body> 
  
</html> 

Output:

Example 2: In this example, we will use text-decoration-skip-ink: none; property value.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | text-decoration-skip-ink 
    </title> 
    <style> 
        .skip-ink-none { 
            font-size: 2em; 
            text-decoration: underline green; 
              
            /* text decoration-skip-ink effect */ 
            text-decoration-skip-ink: none; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
  
        <b> 
            CSS | text-decoration-skip-ink: none; 
        </b> 
          
        <div class="skip-ink-none"> 
            A Computer Science portal for geeks 
        </div> 
    </center> 
</body> 
  
</html> 

Output:

Supported Browsers: The browsers supported by text-decoration-skip-ink property are listed below:

Google Chrome 64
Firefox 70
Opera 50

My Personal Notes

Recommended Posts: