Typography
text-decoration-style
Setting the style of the decoration line that is used on text.
Overview
| Class | Declarations |
|---|---|
text-decoration:dashed | -webkit-text-decoration: dashed;
text-decoration: dashed;
|
text-decoration:dotted | -webkit-text-decoration: dotted;
text-decoration: dotted;
|
text-decoration:double | -webkit-text-decoration: double;
text-decoration: double;
|
text-decoration:solid | -webkit-text-decoration: solid;
text-decoration: solid;
|
text-decoration:wavy | -webkit-text-decoration: wavy;
text-decoration: wavy;
|
text-decoration-style:<style> | text-decoration-style: <style>;
|
Examples
Use a wavy decoration
Use text-decoration-style:wavy for spelling, grammar, or annotation styles where a straight underline would be ambiguous.
<span class="underline text-decoration-style:wavy"> Needs review</span>Generated CSS
@layer utilities { .text-decoration-style\:wavy { text-decoration-style: wavy }}Use dashed or dotted lines
Use dashed and dotted decoration styles for secondary links or subtle annotations.
<a class="underline text-decoration-style:dashed"> Optional details</a>Return to solid lines
Use text-decoration-style:solid when a state should remove a more decorative style.
<a class="text-decoration-style:wavy text-decoration-style:solid:hover"> Hover</a>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<a class="text-decoration-style:wavy:hover text-decoration-style:dashed@sm text-decoration-style:solid@print">...</a>