Bagaimanakah Saya Boleh Mengawal Panjang Sempadan CSS Tanpa HTML Tambahan?

Menyesuaikan Panjang Sempadan dengan CSS

Ketika anda ingin mengehadkan panjang sempadan tanpa menambah elemen tambahan, mari kita mendalami Penyelesaian CSS yang mencapai ini dengan anggun.

Untuk mencipta sempadan yang memanjangkan hanya separuh ke atas elemen, anda boleh memanfaatkan kandungan yang dihasilkan CSS. Begini caranya:

HTML:

<div>Lorem Ipsum</div>

CSS:

div {
  position: relative;
}

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

Dalam coretan CSS ini:

• kedudukan: relatif pada div induk membenarkan kedudukan menjana sempadan secara mutlak.
• kandungan: "" mencipta elemen kosong yang akan bertindak sebagai sempadan tersuai.
• latar belakang: hitam menentukan warna jidar.
• kedudukan: membuat mutlak elemen yang dijana boleh diposisikan.
• bawah: 0 dan kiri: 0 letakkan sempadan di sudut kiri bawah induk div.
• ketinggian: 50% mengehadkan jidar kepada separuh ketinggian elemen induk.

Teknik ini menghasilkan jidar yang memanjang hanya separuh jalan ke atas dari sudut kiri bawah daripada div tanpa memerlukan elemen HTML tambahan atau pemilih adik-beradik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Panjang Sempadan CSS Tanpa HTML Tambahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!