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
