Уласцівасць text-decoration-style

Уласцівасць text-decoration-style мяняе тып лініі ў тэксце: адзіночная лінія, падвойная, у выглядзе кропак, у выглядзе злітной, хвалістая лінія.

Уласцівасць варта выкарыстоўваць сумесна з уласцівасцямі text-decoration-line і text-decoration-color. Гэтыя ўласцівасці пашыраюць дзеянне ўласцівасці text-decoration, з'яўляючыся больш прасунутымі аналагамі.

Сінтаксіс

cssселектар {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Значэнні

Значэнне	Апісанне
`solid`	Суцэльная лінія.
`double`	Падвойная лінія.
`dotted`	Лінія ў выглядзе кропак.
`dashed`	Лінія ў выглядзе злітной.
`wavy`	Хвалістая лінія.

Значэнне па змаўчанні: solid.

Прыклад . Значэнне wavy

Цяпер тэкст стане падкрэсленым чырвонай хвалістай лініяй:

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

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

Результат:

Прыклад . Значэнне dotted

Цяпер тэкст стане падкрэсленым чырвонай лініяй у выглядзе кропак:

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

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

Результат:

Прыклад . Значэнne double

Цяпер тэкст стане перакрэсленым чырвонай падвойнай лініяй:

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

Результат: