Ιδιότητα text-decoration-line

Η ιδιότητα text-decoration-line ορίζει την τοποθέτηση γραμμής στο κείμενο. Η ιδιότητα πρέπει να χρησιμοποιείται μαζί με τις ιδιότητες text-decoration-style και text-decoration-color. Αυτές οι ιδιότητες επεκτείνουν τη δράση της ιδιότητας text-decoration, αποτελώντας πιο προηγμένες αναλογίες.

Σύνταξη

cssεπιλογέας {
  text-decoration-line: underline | line-through | overline | none;
}

Τιμές

Τιμή	Περιγραφή
`underline`	Κάνει υπογραμμισμένο κείμενο.
`line-through`	Κάνει διαγραμμένο κείμενο.
`overline`	Κάνει γραμμή πάνω από το κείμενο.
`none`	Ακυρώνει την υπογράμμιση του υπογραμμισμένου στοιχείου. Χρησιμοποιείται συχνότερα για συνδέσμους, καθώς αυτοί είναι από προεπιλογή υπογραμμισμένοι.

Προεπιλεγμένη τιμή: none. Για συνδέσμους η προεπιλεγμένη τιμή: underline.

Παράδειγμα

Ας διαγράψουμε το κείμενο με κόκκινη γραμμή:

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

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

Результат: