Egenskapen text-decoration-style

Egenskapen text-decoration-style ändrar linjetypen för text: heldragen linje, dubbellinje, punkterad linje, streckad linje, vågig linje.

Egenskapen bör användas tillsammans med egenskaperna text-decoration-line och text-decoration-color. Dessa egenskaper utökar funktionaliteten för egenskapen text-decoration, och är mer avancerade alternativ.

Syntax

cssselektor {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Värden

Standardvärde: solid.

Exempel . Värdet wavy

Texten kommer nu att bli understruken med en röd vågig linje:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Exempel . Värdet dotted

Texten kommer nu att bli understruken med en röd punkterad linje:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Exempel . Värdet double

Texten kommer nu att bli genomstruken med en röd dubbellinje:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: double;
  text-decoration-color: red;
  text-decoration-line: line-through;
}

Результат: