Tachyons
v4.12.0
Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families

Text Decoration

Utilities for decorating text with underlines, or removing the default underlines browsers put on links.

Examples

Text Decoration None

<a class="no-underline">no-underline</a> no-underline

Text Decoration Underline

<p class="underline">underline.</p>

underline.

Text Decoration Strikethrough

<p class="strike">strike.</p>

strike

Previous

Text Transform

Next

White Space

Reference

MDN - Text Decoration

tachyons-text-decoration

v4.0.6 162 B
Declarations
12
Selectors
12
Max. Specificity Score
10
Size of Avg. Rule
1
src/_text-decoration.css 

/*

   TEXT DECORATION
   Docs: http://tachyons.io/docs/typography/text-decoration/


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

.strike       { text-decoration: line-through; }
.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }


@media (--breakpoint-not-small) {
  .strike-ns       { text-decoration: line-through; }
  .underline-ns    { text-decoration: underline; }
  .no-underline-ns { text-decoration: none; }
}

@media (--breakpoint-medium) {
  .strike-m       { text-decoration: line-through; }
  .underline-m    { text-decoration: underline; }
  .no-underline-m { text-decoration: none; }
}

@media (--breakpoint-large) {
  .strike-l       { text-decoration: line-through; }
  .underline-l {    text-decoration: underline; }
  .no-underline-l { text-decoration: none; }
}