Bagaimanakah Saya Boleh Menyesuaikan Panjang Garis Bawah dan Kedudukan Teks dengan Kecerunan CSS?

Menyesuaikan Panjang Garis Garis Teks dan Kedudukan

Untuk mencapai garis bawah teks yang boleh disesuaikan, kecerunan CSS menawarkan penyelesaian yang serba boleh. Dengan mengubahsuai parameter seperti saiz latar belakang, kedudukan latar belakang dan pelapik, anda boleh melaraskan kedua-dua panjang dan kedudukan garis bawah dengan mudah.

Melaraskan Panjang:

Kawalan panjang garis bawah melalui sifat saiz latar belakang. Tentukan peratusan atau nilai piksel tetap (cth., 80% 2px) untuk menskalakan panjang garisan.

Mengubah Kedudukan:

Memanipulasi kedudukan garis bawah menggunakan latar belakang -kedudukan. Dengan mengubah koordinat mendatar dan menegak, anda boleh meletakkan semula garis berbanding teks (cth., tengah bawah untuk lokasi pusat).

Contoh:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center;
  background-size: 80% 2px;
  background-repeat: no-repeat;
  padding-bottom: 4px; /* controls position */
}

Penyesuaian Tambahan:

Selain panjang dan kedudukan, anda boleh meningkatkan garis bawah anda dengan pelbagai sifat lain:

• kecil - Memendekkan panjang dengan ketara
• kiri - Menjajarkan garisan ke tepi kiri
• tengah-tutup - Memusatkan baris dekat dengan teks
• kanan - Menjajarkan garisan ke tepi kanan
• tutup - Gerakkan barisan ke atas dekat dengan teks
• besar - Meningkatkan panjang dan ketebalan
• jauh - Menambah jurang antara garisan dan teks

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Panjang Garis Bawah dan Kedudukan Teks dengan Kecerunan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!