Mengapa 'text-decoration: none' tidak berfungsi pada :after Pseudo-elements untuk Pautan dalam Media Cetak?

Dilawati Semula: Menggunakan “teks-hiasan” dan “:selepas” unsur Pseudo

Dalam percubaan untuk menyelesaikan isu sedia ada, persoalan dibangkitkan: mengapa sifat "text-decoration: none" kelihatan tidak berkesan apabila digunakan dengan elemen pseudo ":after" untuk tambah teks pada pautan? Khususnya, dalam media bercetak, hasil yang diingini ialah memaparkan URL selepas teks pautan, tanpa sebarang garis bawah yang mengganggu.

Soalan asal tertumpu pada menambahkan imej bersaiz tetap, tetapi pertanyaan ini mencari penyelesaian apabila kandungan ialah teks lebar boleh ubah. Oleh kerana jawapan sebelum ini dicadangkan menggunakan padding dan imej latar belakang, yang tidak sesuai untuk kandungan teks, pendekatan alternatif dicari.

Jawapan:

Penyelesaian terletak pada penggunaan sifat "display: inline-block" kepada ":after" pseudo-element. Dengan berbuat demikian, sifat "text-decoration: none" boleh digunakan dengan berkesan untuk mengalih keluar sebarang garis bawah.

Untuk menunjukkan, kod berikut kini berfungsi seperti yang diharapkan:

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

Ini mempunyai telah diuji dalam Chrome 25 dan Firefox 19, dan ia berjaya menyembunyikan garis bawah semasa masih memaparkan teks URL.

Atas ialah kandungan terperinci Mengapa 'text-decoration: none' tidak berfungsi pada :after Pseudo-elements untuk Pautan dalam Media Cetak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!