Bagaimanakah Saya Melaraskan Panjang dan Kedudukan Garis bawah dalam CSS?

Melaraskan Panjang Garis Bawah dan Kedudukan dalam CSS

Menggariskan elemen teks boleh menjadi tugas yang mudah, tetapi menyesuaikan panjang dan kedudukan garis bawah boleh menjadi mencabar. Begini cara anda boleh mencapai kawalan tepat ke atas penggayaan garis bawah:

Kawalan Panjang dan Ketinggian:

Untuk menentukan panjang garis bawah, gunakan sifat saiz latar belakang. Tentukan lebar dan ketinggian garis bawah, cth., saiz latar belakang: 80% 2px;. Meningkatkan nilai peratusan akan memanjangkan garis bawah, manakala melaraskan nilai ketinggian mengawal ketebalan garisan.

Pelarasan Kedudukan:

Sifat kedudukan latar belakang membolehkan anda melaraskan kedudukan menegak garis bawah berbanding teks. Untuk mengalihkan baris lebih dekat kepada teks, kurangkan nilai padding-bottom; untuk mengalihkannya lebih jauh, tingkatkan pelapik.

Contoh dengan Penyesuaian:

Berikut ialah contoh yang menunjukkan cara mengubah suai garis bawah panjang, ketinggian dan kedudukan:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-size: 80% 2px;  
  background-position: bottom center; 
  background-repeat: no-repeat;
  padding-bottom: 4px;
}
.custom-underline {
  background-size: 50% 1px;     
  background-position: bottom left; 
  padding-bottom: 10px;
}

Dengan menggabungkan teknik ini, anda boleh membuat garis bawah tersuai yang meningkatkan daya tarikan visual dan kebolehbacaan anda teks.

Atas ialah kandungan terperinci Bagaimanakah Saya Melaraskan Panjang dan Kedudukan Garis bawah dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!