Teks-garis bawah-kedudukan - Trik CSS

Anonim

The text-underline-positionharta menetapkan penempatan garis bawah pada pautan atau pada teks dengan text-decoration: underline;gunaan.

a ( text-underline-position: under; )

Nilai

Ini adalah nilai-nilai yang dinyatakan dalam Cadangan Calon Tahap 3 Modul Hiasan Teks CSS W3C:

  • auto: lalai. Penyemak imbas akan memutuskan antara meletakkan garis bawah pada garis dasar teks atau di bawahnya.
  • inherit: mewarisi kedudukan garis bawah ibu bapa.
  • under: meletakkan garis bawah di bawah teks dengan ruang tambahan untuk mengelakkan menyeberangi penurun.
  • left: untuk mod penulisan menegak. Ini meletakkan garis di sebelah kiri teks.
  • right: untuk mod penulisan menegak. Ini meletakkan garis di sebelah kanan teks.

Microsoft menggunakan sekumpulan nilai yang berbeza untuk Internet Explorer:

  • auto: lalai. Letakkan garis bawah di bawah teks untuk semua bahasa kecuali bahasa Jepun (lihat pautan MSDN di bahagian "Maklumat Lebih Lanjut" di bawah untuk maklumat lanjut).
  • above: meletakkan garis bawah di atas teks. Secara visual serupa dengantext-decoration: overline;
  • below: meletakkan garis bawah di bawah teks. Perhatikan bahawa ini berbeza dari under- ini tidak akan membersihkan keturunan.
  • auto-posberfungsi sama seperti pelaksanaan MS auto.

Demo

Pada masa penulisan ini, text-underline-positionhanya disokong sebahagian oleh Chrome (33+ dengan bendera eksperimen diaktifkan) dan Internet Explorer 6+. Chrome menyokong auto, inheritdan undernilai-nilai dari syor W3C calon, manakala IE menyokong nilai-nilai sendiri ganti.

Demo ini menunjukkan underdan belownilai dalam penyemak imbas yang menyokongnya.

Lihat teks Pen-garis bawah-kedudukan oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

  • hiasan teks

Maklumat lanjut

  • text-underline-position dalam Modul Hiasan Teks CSS Tahap 3 CR.
  • text-underline-position di MSDN.

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
33 * Tiada Tiada Tiada 6 † Tiada Tiada

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