CSS | text-decoration-skip-ink Property

Last Updated : 30 Jun, 2022

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.

html

<!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.

html

<!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>