Teks-garis bawah-offset - Trik CSS

The text-underline-offsetproperti di CSS menetapkan jarak menggarisbawahi teks dari posisi awal mereka.

.text ( text-underline-offset: 0.5em; )

Setelah Anda menerapkan garis bawah untuk elemen yang menggunakan text-decorationdengan nilai garis bawah , Anda dapat mengatakan seberapa jauh garis itu dari teks Anda menggunakan text-underline-offsetproperti.

Nilai

• auto: (Default) Browser akan menentukan offset yang sesuai untuk garis bawah.
• : Semua panjang yang valid dengan unit tertentu (termasuk nilai negatif). Ini menggantikan informasi apa pun dalam font dan default browser.
• percentage: Menentukan offset garis bawah sebagai persentase 1em dalam font elemen.
• initial: Pengaturan default dari properti, yaitu otomatis.
• inherit: Mengadopsi nilai offset garis bawah dari induk.
• unset: Menghapus offset saat ini dari elemen.

Demo

Dalam demo berikut, Anda dapat mengubah nilai text-underline-offsetuntuk melihat bagaimana pengaruhnya terhadap dekorasi teks elemen:

Catatan

• text-underline-offset bukan bagian dari singkatan dari text-decoration.
• Ini tidak berfungsi di text-decorationjalur lain , seperti line-throughatau overline.
• Nilai negatif diterima, yang mengimbangi garis bawah ke dalam.

Itu konstan untuk keturunannya

Begitu Anda menetapkan dekorasi untuk suatu elemen, semua anaknya akan mendapatkan dekorasi itu juga. Sekarang bayangkan Anda ingin mengubah offset garis bawah untuk salah satu anak:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Ini tidak berfungsi karena Anda tidak dapat mengganti offset garis bawah yang ditentukan oleh elemen leluhur. Agar ini berfungsi, Anda perlu menyetel kekhususan garis bawah untuk elemen itu sendiri:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Direkomendasikan untuk menggunakan em

Manfaat menggunakan nilai relatif seperti em adalah bahwa offset akan berskala dengan perubahan font-sizenilai. Sebaliknya, jika Anda menggunakan satuan panjang tetap (misalnya piksel), offset tidak akan menyesuaikan dengan perubahan dan mungkin bukan jarak yang Anda inginkan untuk teks Anda:

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.

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. Anda dapat memeriksa nilai yang dihitung di DevTools Anda. Itu berarti itu tidak menyesuaikan dengan perubahan font. Di sisi kanan, bagaimanapun, teks mewarisi nilai relatif (dalam hal ini 100%); Oleh karena itu, offset berskala dengan perubahan font:

Mode Penulisan dan posisi garis bawah teks

Memiliki mode penulisan vertikal berpengaruh pada posisi garis bawah. Itu akan mengubah arah offset yang diterapkan pada elemen. Mainkan nilai-nilai di demo berikut:

Terkait

• text-decoration
• text-underline-position
• text-decoration-thickness

Informasi lebih lanjut

Modul Dekorasi Teks CSS Level 4 (Draf Editor)

Dukungan browser

Pada saat tulisan ini dibuat, Firefox adalah satu-satunya browser dengan dukungan penuh. Safari tidak mendukung nilai persentase.

teks-garis bawah-offset

YAITU	Tepi	Firefox	Chrome	Safari	Opera
Tidak	Tidak	70+	Tidak	12.1+	Semua

Android Chrome	Android Firefox	Browser Android	iOS Safari	Opera Mini
Tidak	Tidak	Tidak	12.2+	Iya

teks-garis bawah-offset: persentase

YAITU	Tepi	Firefox	Chrome	Safari	Opera
Tidak	Tidak	74+	Tidak	Tidak	Tidak

Android Chrome	Android Firefox	Browser Android	iOS Safari	Opera Mini
Tidak	Tidak	Tidak	Tidak	Iya