Bagaimanakah Saya Boleh Membuat Sempadan Lebih Kecil Daripada Lebar Div Saya Menggunakan CSS?

Sempadan Kurang Daripada Lebar Div: Penyelesaian Menggunakan Pseudoelements

Dalam HTML dan CSS, dimensi elemen div boleh ditetapkan menggunakan sifat lebar. Saiz sempadan boleh ditetapkan menggunakan harta sempadan. Walau bagaimanapun, jika anda ingin menetapkan sempadan yang lebih kecil daripada lebar div, pendekatan langsung tidak akan mencukupi.

Satu penyelesaian ialah menggunakan unsur pseudo CSS. Pseudoelement :before boleh ditambah pada div dan diletakkan secara mutlak. Ini membolehkan penciptaan elemen yang memanjang dari bahagian bawah div dan hanya selebar yang diingini.

div {
  width: 200px;
  height: 50px;
  position: relative;
  z-index: 1;
  background: #eee;
}

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

Pendekatan ini berkesan mewujudkan sempadan di bahagian bawah div yang hanya selebar seperti yang dinyatakan dalam sifat lebar bagi :before unsur pseudo.

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