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