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