Bagaimanakah Saya Boleh Mengubah Saiz Imej Dalam CSS :before/:after Pseudo-Elements?

Mengubah suai Ketinggian Imej dalam CSS :before/:after Pseudo-Elements

Dalam CSS, pseudo-elements (:sebelum dan :selepas) membolehkan anda mempertingkatkan paparan elemen tanpa mengubah suai kandungannya secara langsung. Walau bagaimanapun, melaraskan ketinggian imej dalam elemen pseudo ini boleh menimbulkan cabaran.

Andaikan anda ingin menghiasi pautan ke jenis fail tertentu menggunakan imej. Anda boleh mentakrifkan pautan anda dengan kelas dan memasukkan peraturan CSS seperti yang ditunjukkan di bawah:

<a href="foo.pdf">

Walaupun pendekatan ini berfungsi dengan berkesan, ia gagal mempertimbangkan kemungkinan imej sebagai saiz yang tidak sesuai untuk teks pautan.

Pada mulanya, anda boleh cuba mengubah saiz imej :selepas menggunakan CSS, tetapi malangnya, ini tidak dapat dilakukan secara langsung. Tidak seperti imej latar belakang, yang boleh diskalakan menggunakan sifat bersaiz latar belakang, unsur pseudo tidak menawarkan mekanisme pensaiz semula yang serupa.

Walau bagaimanapun, terdapat penyelesaian yang membenarkan saiz semula terhad dalam elemen pseudo:

.pdflink:after {
    background-image: url("/images/pdf.png");
    background-size: 10px 20px;
    display: inline-block;
    width: 10px;
    height: 20px;
    content: "";
}

Dengan menetapkan saiz latar belakang dan menentukan lebar dan ketinggian blok, anda boleh mengubah saiz imej dengan berkesan dalam: selepas unsur pseudo. Adalah penting untuk ambil perhatian bahawa pendekatan ini memerlukan elemen pseudo :selepas mempunyai beberapa kandungan yang ditakrifkan walaupun ia kosong ("").

Untuk maklumat lebih terperinci, rujuk Keserasian Rangkaian Pembangun Mozilla (MDN) Jadual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Imej Dalam CSS :before/:after Pseudo-Elements?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!