Warna-dekorasi-teks - Trik CSS

Anonim

The text-decoration-colorproperti menetapkan warna garis bawah, overline, atau line-melalui pada teks dengan text-decorationproperti diterapkan. Itu juga dapat mengatur warna garis bawah pada tautan.

a ( text-decoration-color: #E18728; )

Nilai

text-decoration-colordapat inheritatau menerima nilai warna CSS apa pun, termasuk warna bernama, warna HEX, RGBa, dan HSLa.

Steno

Di browser yang mendukung text-decoration-styledan text-decoration-colorAnda dapat menambahkan warna ke text-decorationproperti singkatan:

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

Saat ini hanya Firefox yang mendukung fitur ini. Safari mendukungnya dengan -webkitawalan. Chrome juga membutuhkan -webkitawalan dan fitur platform web eksperimental yang diaktifkan di bendera Chrome.

Demo

The text-decoration-colordalam demo ini bekerja di versi terbaru Firefox dan Safari. Ini juga akan berfungsi di Chrome dengan mengaktifkan tanda "fitur Platform Web eksperimental".

Lihat Pen text-decoration-color oleh CSS-Tricks (@ css-trick) di CodePen.

Terkait

  • text-decoration
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Informasi Lebih Lanjut

  • text-decoration-color di CSS Text Decoration Module Level 3 CR
  • text-decoration-color di MDN

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
31 † 7.1 * 6,0 ‡ Tidak ada Tidak ada Tidak ada 8 *

† dengan mengaktifkan "fitur Platform Web eksperimental" di chrome: // flags. Chrome 31 membutuhkan awalan -webkit-. Kami menguji Chrome 50 dan hanya bekerja tanpa awalan.
‡ 6+ dengan awalan -moz, tidak diawali pada 36.