Bagaimana untuk Mengalih keluar Garis Bawah daripada URL yang Dilampirkan dengan :selepas dan Teks Lebar Berubah?

Mengalamatkan Hiasan Teks dan :after Pseudo-Element

Dalam siasatan awal, isu penggunaan :after pseudo-class untuk tambahkan URL pada pautan dalam helaian gaya bercetak telah dibangkitkan. Walau bagaimanapun, jawapan yang diberikan ternyata tidak mencukupi.

Kebimbangan utama ialah ketidakupayaan untuk mengalih keluar penggayaan garis bawah lalai daripada URL yang dilampirkan, walaupun secara eksplisit menetapkan 'text-decoration: none;'. Ini mengakibatkan garis bawah yang tidak menarik dilanjutkan di bawah URL dalam penyemak imbas seperti Firefox dan Chrome.

Penyelesaian untuk Teks Lebar Boleh Ubah

Penyelesaian yang dicadangkan sebelum ini menggunakan teknik seperti pelapik dan imej latar belakang untuk memintas sifat hiasan teks yang bermasalah. Walau bagaimanapun, kaedah ini tidak boleh digunakan apabila kandungan yang dilampirkan ialah teks lebar berubah-ubah.

Untuk menyelesaikan masalah ini, ubah suai sifat paparan unsur pseudo :selepas kepada 'sekatan-sebaris'. Ini membenarkan 'text-decoration: none;' pengisytiharan akan berkuat kuasa, seperti yang ditunjukkan dalam kod berikut:

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

CSS terlaras ini memastikan URL yang dilampirkan dipaparkan tanpa sebarang garis bawah, tanpa mengira lebarnya. Dengan menggunakan penyelesaian ini, anda boleh menambahkan teks lebar boleh ubah secara berkesan pada pautan dan menentukan warna yang diingini, dengan itu menangani kebimbangan awal dan menyediakan pemaparan bercetak yang lebih halus bagi URL.

Atas ialah kandungan terperinci Bagaimana untuk Mengalih keluar Garis Bawah daripada URL yang Dilampirkan dengan :selepas dan Teks Lebar Berubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!