Mengapa 'text-decoration: none' Gagal Mengalih keluar Garis bawah daripada Pautan Apabila Menggunakan Elemen Pseudo ':selepas' dalam Media Bercetak?

Menyemak Semula Peranan "teks-hiasan" dan ":selepas" Elemen Pseudo dalam Penggayaan Media Bercetak

Di alam penggayaan cetakan, keinginan untuk memaparkan maklumat tambahan selepas pautan menggunakan elemen pseudo ":selepas" sering timbul. Walau bagaimanapun, mencapai tugas yang kelihatan mudah ini boleh mendatangkan cabaran. Terutamanya, sifat "teks-hiasan", bertujuan untuk mengalih keluar garis bawah lalai daripada pautan, telah diperhatikan menunjukkan tingkah laku yang tidak dijangka dalam sesetengah penyemak imbas.

Pendekatan Awal: Menghadapi Isu

Dalam percubaan awal untuk menambahkan URL selepas pautan menggunakan elemen pseudo ":selepas", lembaran gaya berikut telah digunakan:

a:after {
  content: " <" attr(href) ">";
  text-decoration: none;
}

Mengecewakan pengguna, pendekatan ini terbukti tidak berjaya. Dalam Firefox dan Chrome, pengisytiharan "text-decoration: none" telah diabaikan, mengakibatkan garis bawah yang tidak sedap dipandang meluas di bahagian bawah URL yang dipaparkan.

Menyelesaikan Dilema: Memperkenalkan "display: inline- block"

经过一番探索， pengguna terjumpa penyelesaian yang menangani isu tersebut. Dengan menggunakan "display: inline-block" pada pseudo-element ":after", sifat "text-decoration" mula berfungsi seperti yang diharapkan.

a:after {
  content: " <" attr(href) ">";
  text-decoration: none;
  display: inline-block;
}

Pengubahsuaian ini memastikan kandungan yang ditambahkan selepas pautan dipaparkan sebagai blok sebaris, membenarkan sifat "hiasan teks" untuk mengalih keluar garis bawah dengan berkesan, tanpa mengira penyemak imbas yang digunakan.

Atas ialah kandungan terperinci Mengapa 'text-decoration: none' Gagal Mengalih keluar Garis bawah daripada Pautan Apabila Menggunakan Elemen Pseudo ':selepas' dalam Media Bercetak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!