text-decoration-skip-ink

The text-decoration-skip-ink property controls the appearance of underlines and overlines. If the text needs to be struck through, the text-decoration-skip-ink property will be ignored.

Possible values:

• none — the line is drawn under the text through the glyphs;
• auto — the line may be drawn so that it does not touch the glyphs (default value);
• all — the line will be drawn, without touching the glyphs.

Let’s create a few paragraphs of text. We will apply the text-decoration-skip-ink property to them along with the text-decoration property with different values.

        
          
          a {  text-decoration: underline;}
          a {
  text-decoration: underline;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          a {  text-decoration: overline;}
          a {
  text-decoration: overline;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 text-decoration-skip-ink works only together with text-decoration.

If you write

        
          
          p {  text-decoration-skip-ink: auto;}
          p {
  text-decoration-skip-ink: auto;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

text-decoration-skip-ink will be applied, but it will not work correctly.

To avoid this, you need to modify the code above slightly:

        
          
            p {+   text-decoration: underline;    text-decoration-skip-ink: auto;  }
            p {
+   text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 text-decoration-skip-ink will not work correctly when using text-decoration: overline because the line will appear over the highest glyph of the text.