The text-decoration-skip property specifies the parts of an element’s content the text decoration should skip over.
It controls all text decoration lines drawn by the element and by its ancestors.
The "ink" value was moved to the text-decoration-skip-ink property.
Initial Value | objects |
Applies to | All elements. |
Inherited | Yes. |
Animatable | No. |
Version | CSS3 |
DOM Syntax | object.style.textDecorationSkip = "spaces"; |
Syntax
text-decoration-skip: none | objects | spaces | leading spaces | trailing spaces | edges | box-decoration | initial | inherit;
Example of the text-decoration-skip property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 1;
color: #ccc;
font-size: 2em;
text-decoration: underline;
text-decoration-skip: edges;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<p>
<em>Lorem,</em>
<em>ipsum is simply dummy text</em>
</p>
</body>
</html>
Result
![CSS text-decoration-skip values list](/uploads/media/default/0001/04/c819720bbc6dc59697f316d457258113196f15a5.png)
Values
Value | Description |
---|---|
none | No skip will appear. Thus, text decoration is drawn for all text content. |
objects | The entire margin box of the element is skipped if it is an image or inline-block. |
spaces | All spacing is skipped. |
leading spaces | Leading spaces are skipped (typographic character units, word separators, letter-spacing or word-spacing). |
trailing spaces | Trailing spaces are skipped (typographic character units, word separators, letter-spacing or word-spacing). |
edges | The start and end of the text decoration is inset slightly from the content edge of the decorating box. |
box-decoration | The box’s margin, border, and padding areas are skipped. |
ink | Glyphs or descenders are skipped. |
initial | Sets the property to its default value. |
inherit | Inherits the property from its parent element. |
Browser support
|
|
|
|
---|---|---|---|
✕ | ✕ |
12.1+ 8.0 -webkit- |
✕ |
Practice Your Knowledge
What does the 'text-decoration-skip' property in CSS do?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.