css penyingkiran garis bawah

Dalam reka bentuk web, garis bawah ialah garisan hiasan yang biasa digunakan untuk menambah gaya pada hiperpautan. Walau bagaimanapun, dalam beberapa kes kita mungkin perlu mengalih keluar garis bawah daripada hiperpautan. Dalam css, terdapat beberapa cara untuk membuat hiperpautan tanpa garis bawah.

1. atribut hiasan teks

Dalam CSS, atribut hiasan teks boleh digunakan untuk mengawal baris hiasan teks. Dengan menetapkan text-decoration:none, garis bawah hiperpautan boleh dialih keluar.

Sebagai contoh, kod berikut boleh mengalih keluar garis bawah daripada semua hiperpautan:

a {
  text-decoration: none;
}

2. atribut bawah sempadan

Cara lain ialah menggunakan sempadan - atribut bawah untuk mensimulasikan garis bawah. Garis bawah boleh dialih keluar dengan menetapkan border-bottom:none.

Sebagai contoh, kod berikut boleh mengalih keluar garis bawah daripada semua hiperpautan dan menambah sempadan bawah 1 piksel menggunakan atribut sempadan bawah:

a {
  text-decoration: none;
  border-bottom: 1px solid #000;
}

3. atribut imej latar belakang

Kami juga boleh menggunakan atribut imej latar belakang untuk mengalih keluar garis bawah. Garis bawah boleh dialih keluar dengan menetapkan imej latar belakang hiperpautan kepada piksel kosong. Kaedah ini juga boleh digunakan untuk menambah garis bawah tersuai.

Sebagai contoh, kod berikut akan mengalih keluar garis bawah daripada semua hiperpautan dan menetapkan garis bawah kepada garis biru setinggi 1 piksel:

a {
  text-decoration: none;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=");
  background-repeat: repeat-x;
  background-position: bottom;
  background-color: blue;
  height: 1px;
}

4. :selepas pemilih

Akhir sekali, kita juga boleh menggunakan pemilih :selepas untuk menambah garis bawah. Kaedah ini boleh menambah elemen pseudo pada hiperpautan dan menambah gaya pada elemen untuk mencapai kesan garis bawah.

Sebagai contoh, kod berikut boleh mengalih keluar garis bawah semua hiperpautan dan menambah garis bawah hitam setinggi 1 piksel menggunakan pemilih :after:

a {
  text-decoration: none;
  position: relative;
}

a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: black;
}

Untuk meringkaskan, dengan menetapkan teks- Dengan decoration:none, border-bottom:none, background-image dan kaedah lain, kami boleh mengalih keluar garis bawah hiperpautan atau menambah garis bawah tersuai. Menggunakan pemilih :selepas membolehkan kami mengawal gaya garis bawah dengan lebih fleksibel. Dalam aplikasi praktikal, kita boleh memilih kaedah yang paling sesuai untuk membuang garis bawah mengikut situasi tertentu.

Atas ialah kandungan terperinci css penyingkiran garis bawah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!