Properti text-decoration-style

Properti text-decoration-style mengubah tipe garis pada teks: garis tunggal, ganda, berbentuk titik, berbentuk garis putus, garis bergelombang.

Properti ini harus digunakan bersama dengan properti text-decoration-line dan text-decoration-color. Properti-properti ini memperluas aksi properti text-decoration, menjadi analog yang lebih maju.

Sintaks

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

Nilai

Nilai default: solid.

Contoh . Nilai wavy

Sekarang teks akan menjadi bergaris bawah dengan garis bergelombang merah:

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

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

Результат:

Contoh . Nilai dotted

Sekarang teks akan menjadi bergaris bawah dengan garis berbentuk titik merah:

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

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

Результат:

Contoh . Nilai double

Sekarang teks akan menjadi tercoret dengan garis ganda merah:

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

Результат: