Kesan aplikasi dan pelaksanaan CSS::before pseudo-element selector

Kesan aplikasi dan pelaksanaan CSS::before pseudo-element selector

CSS::before pseudo-element selector ialah pemilih kelas pseudo yang biasa digunakan dalam CSS Ia boleh memasukkan elemen maya sebelum kandungan elemen . elemen dan boleh dihiasi dan dicantikkan melalui gaya CSS. Dalam artikel ini, kami akan memperkenalkan kesan aplikasi dan pelaksanaan bagi ::before pemilih elemen pseudo, dan menyediakan contoh kod khusus untuk rujukan.

1. Senario aplikasi

1. Hiasan teks: masukkan ikon, label, imej dan kandungan lain di hadapan teks untuk meningkatkan ekspresi teks
2. Hiasan gambar: tambah bayang, sempadan atau kesan lain di hadapan gambar untuk meningkatkan keindahan gambar ;
3. Hiasan senarai: tambahkan logo atau nombor siri untuk menyenaraikan item untuk meningkatkan kebolehbacaan senarai
4. Label tersuai: capai kesan label tersuai melalui pemilih elemen pseudo
;
5. Hiasan latar belakang: gunakan: Pemilih elemen pseudo :before menambah latar belakang, sempadan dan kesan lain pada elemen bekas.

2. Contoh kesan pelaksanaan

1. Contoh hiasan teks

<style>
  .icon::before {
    content: "002";
    font-family: "Font Awesome 5 Free";
    color: red;
    margin-right: 5px;
  }
</style>

<p class="icon">CSS ::before伪元素选择器示例</p>

Dengan kod di atas, kami menggunakan perpustakaan ikon Font Awesome untuk menambah ikon pada teks, dan menetapkan warna merah dan jidar kanan. .

2. Contoh hiasan senarai

<style>
  .image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .image-container:hover::before {
    opacity: 1;
  }
</style>

<div class="image-container">
  <img src="example.jpg" alt="Example Image">
</div>

Dalam kod di atas, kami menggunakan titik padu sebagai simbol senarai untuk mencapai kesan hiasan item senarai.

3. Contoh teg tersuai

<style>
  ul li::before {

    color: red;
    margin-right: 5px;
  }
</style>

<ul>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
</ul>

Dalam kod di atas, kami menambahkan teg tersuai pada perenggan, yang dilaksanakan melalui pemilih unsur pseudo ::before.

4. Contoh hiasan latar belakang

<style>
  .custom-tag::before {
    content: "Tag: ";
    font-weight: bold;
  }
</style>

<p class="custom-tag">自定义标签示例</p>

Dalam kod di atas, kami menambahkan imej latar belakang pada elemen bekas, menetapkan kelegapan kepada 0.5 dan mengawal tahapnya melalui atribut indeks-z untuk mencapai kesan hiasan latar belakang.

3. Ringkasan
5. Dengan CSS ::sebelum pemilih unsur pseudo, kami boleh mencapai pelbagai kesan hiasan dan menambahkan lagi keindahan dan ekspresi pada elemen halaman web. Apabila menggunakan ::before pseudo-element selector, kita perlu memberi perhatian kepada cara pemilih ditulis, menentukan kandungan yang disisipkan melalui atribut kandungan dan menghiasi serta mencantikkannya melalui gaya CSS yang lain. Saya harap kod sampel yang disediakan dalam artikel ini dapat membantu anda memahami dan menggunakan pemilih unsur pseudo dengan lebih baik ::before.

Atas ialah kandungan terperinci Kesan aplikasi dan pelaksanaan CSS::before pseudo-element selector. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!