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.
Watch a video course
CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
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
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.