Bagaimanakah Saya Boleh Membuat Sempadan Lebih Pendek Daripada Lebar Div Saya?

Panjang Sempadan Lebih Cetek Daripada Lebar Div

Kod anda mentakrifkan elemen div dengan lebar 200px dan jidar magenta pepejal 1px di sepanjang bahagian bawahnya tepi. Walau bagaimanapun, anda mencari kaedah untuk mengehadkan panjang sempadan ini kepada hanya 100px tanpa mengubah lebar div.

Pseudoelements menyediakan penyelesaian. Pseudoelements ialah elemen yang ditambahkan pada pepohon DOM anda, membolehkan anda menggayakan bahagian elemen sedia ada. Dalam keadaan ini, anda boleh mencipta unsur pseudo yang bertindak sebagai sempadan:

div:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

Unsur pseudo ini, yang meletakkan dirinya sepenuhnya di sebelah kiri bahagian bawah div, mereplikasi panjang sempadan 100px yang dikehendaki. Dengan melaraskan sifat lebarnya, anda boleh mengawal panjang sempadan dengan mudah tanpa menjejaskan lebar div itu sendiri.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan Lebih Pendek Daripada Lebar Div Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!