Typography

Text Decoration

Utilities for sets the text underline or line-through of an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
text-`{options}` `{thickness}` `{offset}`	text-decoration: `{options}`; text-decoration-thickness: `{thickness}`; text-underline-offset: `{offset}`

class	css
underline	text-decoration: underline	Text
line-through	text-decoration: line-through	Text
no-deco	text-decoration: none	Text

class	css
line-thickness-1	text-decoration-thickness: 0.2em	Text
line-thickness-2	text-decoration-thickness: 0.3em	Text
line-thickness-3	text-decoration-thickness: 0.4em	Text
line-thickness-4	text-decoration-thickness: 0.5em	Text
line-thickness-5	text-decoration-thickness: 0.6em	Text

class	css
line-offset-1	text-decoration-thickness: 0.1em	Text
line-offset-2	text-decoration-thickness: 0.2em	Text
line-offset-3	text-decoration-thickness: 0.3em	Text
line-offset-4	text-decoration-thickness: 0.4em	Text
line-offset-5	text-decoration-thickness: 0.5em	Text

Usage

Text Underline

<div class="text-underline">
  ...
</div>

HTML

.dummy {
  @extend
    .text-underline;
}

SCSS

Text Underline Thickness

<div class="text-underline line-thickness-3">
  ...
</div>

HTML

.dummy {
  @extend
    .text-underline,
    .line-thickness-3;
}

SCSS

Text Underline Offset

<div class="text-underline line-offset-3">
  ...
</div>

HTML

.dummy {
  @extend
    .text-underline,
    .line-offset-3;
}

SCSS