The text-decoration-thicknessproperti di CSS menetapkan ketebalan stroke garis hiasan yang digunakan pada teks dalam elemen. The text-decoration-linekebutuhan nilai menjadi baik underline, line-throughatau overlineuntuk mencerminkan properti ketebalan.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintaksis
auto | from-font | | Nilai
auto: (Default) Memungkinkan browser menentukan ketebalan yang sesuai untuk garis dekorasi teks.from-font: Jika font pertama yang tersedia memiliki metrik yang menentukan ketebalan yang disukai, ia menggunakan ketebalan itu; jika tidak, ia akan berperilaku seperti nilai otomatis.: Panjang valid apa pun dengan satu unit menentukan ketebalan garis dekorasi teks sebagai panjang tetap. Ini menggantikan informasi apa pun dalam font dan default browser.percentage: Menentukan ketebalan garis dekorasi teks sebagai persentase dari 1em di elemen font.initial: Pengaturan default dari properti yang otomatis.inherit: Mengadopsi nilai ketebalan dekorasi induk.unset: Menghapus ketebalan saat ini dari elemen.
Demo
Ubah nilai text-decoration-thicknessdi demo berikut untuk melihat bagaimana properti memengaruhi dekorasi teks elemen:
Itu konstan untuk keturunan
Setelah menetapkan dekorasi untuk suatu elemen, semua anaknya akan mendapatkan dekorasi itu juga. Sekarang bayangkan kita ingin mengubah ketebalan dekorasi untuk salah satu anak:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Ini tidak berfungsi karena ketebalan dekorasi yang ditentukan oleh elemen leluhur tidak dapat diganti. Agar ini berfungsi, kekhususan dekorasi perlu ditetapkan untuk elemen itu sendiri:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Persentase dan kaskade
Untuk properti ini, panjang akan mewarisi sebagai nilai tetap, dan tidak akan diskalakan dengan font. Di sisi lain, persentase akan diwarisi sebagai nilai relatif dan, oleh karena itu, diskalakan dengan perubahan font saat diwarisi.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Demo berikut menunjukkan perbandingan antara menggunakan em dan nilai persentase dalam kasus warisan dan, seperti yang Anda lihat, di sisi kiri (di mana kami menggunakan em) nilai yang diwariskan adalah panjang tetap. Itu berarti itu tidak menyesuaikan dengan perubahan font. Namun, di sisi kanan, teks mewarisi nilai relatif (dalam hal ini 20%); oleh karena itu ketebalan berskala dengan perubahan font.
Meskipun draf kerja spesifikasi saat ini merujuk pada nilai persentase text-decoration-thickness, dukungan sebenarnya saat ini terbatas pada Firefox.
Menggunakan dengan text-decoration
Draf kerja saat ini dari spesifikasi CSS Text Decoration Module Level 4 termasuk text-decoration-thicknesssebagai nilai dalam text-decorationproperti singkatan.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )Meskipun text-decorationdidukung dengan baik, dukungan untuk penyertaan text-decoration-thicknesssaat ini terbatas pada Firefox.
Dukungan browser
| Fitur | YAITU | Tepi | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Properti | Tidak | Tidak | 70 | Tidak | 12.1 | Tidak |
| Persentase | Tidak | Tidak | 76 | Tidak | Tidak | Tidak |
| Steno | Tidak | Tidak | 70 | Tidak | Tidak | Tidak |
| Fitur | Android Chrome | Android Firefox | Browser Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Properti | Tidak | Tidak | Tidak | 12.2 | Tidak |
| Persentase | Tidak | Tidak | Tidak | Tidak | Tidak |
| Steno | Tidak | Tidak | Tidak | Tidak | Tidak |
Catatan
- Properti ini dulunya dipanggil
text-decoration-width, tetapi telah diperbarui dalam draf kerja 2019 dari spesifikasi CSS Text Decoration Module Level 4. - Browser harus menggunakan ketebalan minimal 1 piksel perangkat.