text-decoration-line
En esta página
| Clase | Propiedades CSS |
|---|---|
underline |
text-decoration-line: underline; |
overline |
text-decoration-line: overline; |
line-through |
text-decoration-line: line-through; |
no-underline |
text-decoration-line: none; |
Examples#
Underling text#
Use the underline utility to add an underline to the text of an element:
{
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:underline] -->
<p class="underline">The quick brown fox...</p>
Adding an overline to text#
Use the overline utility to add an overline to the text of an element:
{
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:overline] -->
<p class="overline">The quick brown fox...</p>
Adding a line through text#
Use the line-through utility to add a line through the text of an element:
{
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:line-through] -->
<p class="line-through">The quick brown fox...</p>
Removing a line from text#
Use the no-underline utility to remove a line from the text of an element:
{
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:no-underline] -->
<p class="no-underline">The quick brown fox...</p>
Applying on hover#
{
The{" "}
quick brown fox
{" "}
jumps over the lazy dog.
}
<!-- [!code classes:hover:underline] -->
<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>