Text Decoration

vel-src: typography.css

Utilities for controlling the decoration of text.

Class	Properties
vel-underline	text-decoration-line: underline
vel-no-underline	text-decoration-line: none
vel-line-through	text-decoration-line: line-through
vel-overline	text-decoration-line: overline
vel-decoration-solid	text-decoration-style: solid
vel-decoration-double	text-decoration-style: double
vel-decoration-dotted	text-decoration-style: dotted
vel-decoration-dashed	text-decoration-style: dashed
vel-decoration-wavy	text-decoration-style: wavy
vel-decoration-0	text-decoration-thickness: 0px
vel-decoration-1	text-decoration-thickness: 1px
vel-decoration-2	text-decoration-thickness: 2px
vel-decoration-4	text-decoration-thickness: 4px
vel-decoration-8	text-decoration-thickness: 8px
vel-underline-offset-0	text-underline-offset: 0px
vel-underline-offset-1	text-underline-offset: 1px
vel-underline-offset-2	text-underline-offset: 2px
vel-underline-offset-4	text-underline-offset: 4px
vel-underline-offset-8	text-underline-offset: 8px

Examples

Basic decoration styles

Underline

Line-through

Overline

No underline (override)

example.html

<div style="display:flex;flex-direction:column;gap:0.5rem;color:#e2e8f0;background:#060b17;padding:1.25rem;border-radius:0.5rem">
  <p class="vel-underline" style="margin:0">Underline</p>
  <p class="vel-line-through" style="margin:0">Line-through</p>
  <p class="vel-overline" style="margin:0">Overline</p>
  <p class="vel-no-underline vel-underline" style="margin:0;text-decoration:none">No underline (override)</p>
</div>

Decoration styles with color

Wavy violet underline

Dotted green with offset

Thick dashed red

example.html

<div style="display:flex;flex-direction:column;gap:0.5rem;color:#e2e8f0;background:#060b17;padding:1.25rem;border-radius:0.5rem">
  <p class="vel-underline vel-decoration-wavy vel-decoration-2" style="margin:0;text-decoration-color:#7c5cfc">Wavy violet underline</p>
  <p class="vel-underline vel-decoration-dotted vel-underline-offset-4" style="margin:0;text-decoration-color:#0ecb81">Dotted green with offset</p>
  <p class="vel-underline vel-decoration-dashed vel-decoration-4" style="margin:0;text-decoration-color:#f0416c">Thick dashed red</p>
</div>

Remove underline from links

Link without underline (hover to underline)

example.html

<a class="vel-no-underline vel-text-primary vel-hover:underline" href="#" style="color:#7c5cfc">
  Link without underline (hover to underline)
</a>