Skip to content
Related Articles

Related Articles

Improve Article
CSS | text-decoration-skip-ink Property
  • Last Updated : 28 Nov, 2019

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 arrow_drop_up
Recommended Articles
Page :