Linija za ukras teksta - CSS-trikovi

Anonim

text-decoration-lineNekretnina ukrašava tekst podvlačenje, linija zaglavlja, line-through ili kombinacijom tih linija.

p ( text-decoration-line: underline; )

Vrijednosti

  • none: nije dodan redak i uklonjeni su svi postojeći retci - na primjer noneuklanja zadano podcrtavanje na vezama.
  • underline: dodaje podcrtavanje od 1 piksela ispod teksta.
  • overline: dodaje gornji tekst od 1 piksela iznad teksta.
  • line-through: dodaje redak od 1 piksela kroz tekst.
  • inherit: nasljeđuje ukras roditelja.

Vrijednost blinkje u specifikaciji W3C, ali je zastarjela i neće raditi ni u jednom trenutnom pregledniku. Kad je uspio, činilo se da tekst "trepće" brzim prebacivanjem između 0% i 100% neprozirnosti.

Kombiniranje vrijednosti

Možete kombinirati underline, overlineili line-throughvrijednosti u popisu prostor odvojen dodati više ukras linije:

p ( text-decoration-line: overline underline line-through; )

Upotreba

text-decoration-lineImovina je gotovo identičan izvornom text-decorationimovine. Ako sve što želite jest dodati redak ili crte u tekst, text-decorationbolji je izbor jer ga podržava svaki preglednik, čak i vrlo stari. Općenito, upotreba text-decoration-linedeklaracije ima smisla samo kad pišete pravilo dugotrajnog stila koje uključuje text-decoration-styleili text-decoration-colordeklaraciju. Ako želite koristiti sve tri zajedno, možete koristiti stenografsko text-decorationsvojstvo.

Stenografija

text-decoration-linemože se koristiti u kombinaciji sa text-decoration-stylei text-decoration-coloru skraćenici CSS3 text-decorationsvojstvo (trenutno samo Firefox to u potpunosti podržava):

.underlined ( text-decoration: underline dotted red; )

Demo

Ova će demonstracija raditi u Safariju, Firefoxu i Chromeu s omogućenim eksperimentalnim značajkama web platforme. blinkVrijednost nije uključena u cijenu.

Pogledajte redak za ukrašavanje teksta olovke od CSS-Tricks (@ css-tricks) na CodePenu.

Povezano

  • tekst-ukras
  • tekst-ukras-stil
  • tekst-ukras-boja
  • tekst-ukras-preskočiti

Više informacija

  • text-decoration-line u specifikaciji W3C
  • text-decoration-line na MDN

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
31 * † 7,1 * 6 ‡ Nijedna Nijedna Nijedna 8 *

* s -webkitprefiksom
† s omogućenom eksperimentalnom značajkom web platforme
‡ 6 - 35 s -mozprefiksom, bez predfiksa od 36.