A text-decoration-style tulajdonság

A text-decoration-style tulajdonság megváltoztatja a szöveg vonaltípusát: egyszínű vonal, dupla, pontok formájában, szaggatott vonal, hullámos vonal.

A tulajdonságot együtt kell használni a text-decoration-line és a text-decoration-color tulajdonságokkal. Ezek a tulajdonságok kiterjesztik a text-decoration tulajdonság hatását, annak fejlettebb párjaiként szolgálva.

Szintaxis

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

Értékek

Érték	Leírás
`solid`	Folyamatos vonal.
`double`	Dupla vonal.
`dotted`	Pontokból álló vonal.
`dashed`	Szaggatott vonal.
`wavy`	Hullámos vonal.

Alapértelmezett érték: solid.

Példa . A wavy érték

Most a szöveg aláhúzva lesz piros hullámos vonallal:

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

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

Példa . A dotted érték

Most a szöveg aláhúzva lesz piros pontokból álló vonallal:

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

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

Példa . A double érték

Most a szöveg áthúzva lesz piros dupla vonallal:

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

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