Bagaimana untuk Mencipta Sempadan Mengembang pada Hover dengan CSS?

Meluaskan Sempadan pada Tuding dengan CSS

Anda inginkan sempadan yang mengembang apabila tetikus melayang di atasnya. Berikut ialah pendekatan alternatif untuk mencapai kesan ini:

Menggunakan sifat transformasi CSS, terutamanya transform:scaleX(), membolehkan anda menskalakan elemen sempadan.

h1 {
  display: inline-block;
}

h1:after {
  content: "";
  border-bottom: 3px solid #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1:hover:after {
  transform: scaleX(1);
}

Dalam pendekatan ini, kami gunakan sifat penjelmaan dan peralihan kepada unsur pseudo (::selepas) untuk mengelakkan menjejaskan kandungan teks dan menambah penanda yang diperlukan.

Untuk mengembangkan sempadan dari kiri atau kanan, laraskan sifat asal-ubah dengan sewajarnya:

h1.fromRight:after {
  transform-origin: 100% 50%;
}

h1.fromLeft:after {
  transform-origin: 0% 50%;
}

Dengan menyesuaikan asal-ubah, anda boleh mengawal arah pengembangan sempadan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sempadan Mengembang pada Hover dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!