text-decoration în CSS

text-decoration: none;                              /* elimină sublinierea linkurilor */
text-decoration: underline;                         /* linie dedesubt */
text-decoration: line-through;                      /* tăiat (preț vechi) */
text-decoration: underline wavy #e34f26 2px;        /* modern: linie ondulată colorată */

Ce face text-decoration

text-decoration este folosit frecvent pentru a elimina sublinierea implicită a linkurilor (none) și a o adăuga la :hover.

În CSS modern, poți personaliza linia în detaliu cu text-decoration-color, text-decoration-style (solid, wavy, dashed) și text-underline-offset (distanța dintre linie și text).

Valori uzuale

Valoare	Descriere
none	Elimină orice linie decorativă.
underline	Subliniază textul.
line-through	Trage o linie peste text (util pentru prețuri vechi reduse).
wavy	Linie ondulată (stil corector ortografic).

Exemple

Exemplul 1: Preț redus cu preț vechi tăiat și link cu offset modern

text-underline-offset îndepărtează linia de text pentru o lizibilitate elegantă.

.pret-vechi {
  text-decoration: line-through;
  color: #94a3b8;
}
a.link-curat {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 4px;
}

Efect vizual în browser

Prețul vechi apare gri și tăiat cu o linie la mijloc, iar linkul are o subliniere aerisită, puțin mai jos de litere.

Greșeli frecvente

• Sublinierea textelor obișnuite care nu sunt linkuri; utilizatorii se așteaptă ca orice text subliniat să fie clicabil.

Comenzi înrudite

• color: Setează culoarea textului și a elementelor decorative asociate (sublinieri, borduri implicite).
• font-size (rem, em, px, clamp): Stabilește dimensiunea textului; se recomandă unități rem pentru respectarea preferințelor utilizatorului.