Text Decoration

The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink. Underline and overline decorations are positioned under the text, line-through over it.

Source: Mozilla developper

Mixin

Syntax

@include text-decoration($value, $breakpoint:null);

The text-decoration mixin accepts two parameters:

Parameter	Type	Required	Description
$value	String	Required	One of the allowed values listed below.
$breakpoint	String	Optionnal	Restrict the value to the given breakpoint. The default value is null, which means the value will be applied without a breakpoint restriction.

Values

Accepted values

$value	Version
none	1.0
justify	1.0
line-through	1.0
underline	1.0

Breakpoint

$breakpoint	Description
xxs	Will be applied for the size xxs and up
xs	Will be applied for the size xs and up
s	Will be applied for the size s and up
m	Will be applied for the size m and up
l	Will be applied for the size l and up
xl	Will be applied for the size xl and up
xxl	Will be applied for the size xxl and up

Helpers

Syntax

[.|%]td-[xxs|xs|s|m|l|xl|xxl]?-?[none|justify|line-through|underline]

Examples

Remove the underlining

a{
  @include text-decoration(none);
}

Define directly in the html

<a href="#" class=".td-none">...</a>