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

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; }
}