Skip to content
Related Articles

Related Articles

CSS | text-decoration-skip-ink Property

View Discussion
Improve Article
Save Article
Like Article
  • 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>

Output:

  

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

  • Google Chrome 64
  • Edge 79
  • Firefox 70
  • Opera 50
  • Safari 15.4


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!