Teks-posisi-garis bawah - Trik CSS

Anonim

The text-underline-positionproperti menetapkan penempatan garis bawah pada link atau teks dengan text-decoration: underline;terapan.

a ( text-underline-position: under; )

Nilai

Ini adalah nilai yang ditentukan dalam Rekomendasi Kandidat Level 3 W3C CSS Text Decoration Module:

  • auto: default. Browser akan memutuskan antara menempatkan garis bawah pada garis dasar teks atau di bawahnya.
  • inherit: mewarisi posisi garis bawah dari induknya.
  • under: menempatkan garis bawah di bawah teks dengan spasi ekstra untuk mencegah persilangan keturunan.
  • left: untuk mode penulisan vertikal. Ini menempatkan garis di sebelah kiri teks.
  • right: untuk mode penulisan vertikal. Ini menempatkan garis di sebelah kanan teks.

Microsoft menggunakan sekumpulan nilai yang berbeda untuk Internet Explorer:

  • auto: default. Tempatkan garis bawah di bawah teks untuk semua bahasa kecuali Jepang (lihat tautan MSDN di bagian "Informasi Lebih Lanjut" di bawah untuk detailnya).
  • above: memposisikan garis bawah di atas teks. Identik secara visual dengantext-decoration: overline;
  • below: memposisikan garis bawah di bawah teks. Perhatikan bahwa ini berbeda dari under- ini tidak akan menghapus turunan.
  • auto-posbekerja sama dengan implementasi MS auto.

Demo

Pada saat penulisan ini, text-underline-positionhanya didukung sebagian oleh Chrome (33+ dengan bendera eksperimental diaktifkan) dan Internet Explorer 6+. Chrome mendukung auto, inheritdan undernilai-nilai dari rekomendasi calon W3C, sementara IE mendukung nilai-nilai alternatif sendiri.

Demo ini menunjukkan nilai underdan belowdi browser yang mendukungnya.

Lihat Pen text-underline-position by CSS-Tricks (@ css-trick) di CodePen.

Terkait

  • dekorasi teks

Informasi Lebih Lanjut

  • text-underline-position di CSS Text Decoration Module Level 3 CR.
  • text-underline-position di MSDN.

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
33 * Tidak ada Tidak ada Tidak ada 6 † Tidak ada Tidak ada

* dengan -webkitawalan dan bendera eksperimental diaktifkan di chrome: // flags. leftdan rightnilai - nilai tidak didukung.
† dengan -msawalan dan nilai khusus IE.