Bagaimana untuk Menyelesaikan Konflik 'text-decoration' dengan :after Pseudo-Elements?

Menyelesaikan Konflik :selepas Pseudo-Element dengan "teks-hiasan"

Asalnya dikemukakan untuk menyelesaikan isu penambahan imej selepas pautan menggunakan :selepas, soalan ini telah muncul semula dengan fokus pada menambahkan lebar pembolehubah teks.

Cabarannya terletak pada menggunakan sifat "text-decoration: none" pada :after pseudo-element sambil mengekalkan paparan kandungannya. Dalam Firefox dan Chrome, garis bawah untuk URL berterusan, menafikan kesan yang dimaksudkan.

Kunci untuk mengatasi halangan ini terletak pada menetapkan sifat "display: inline-block" untuk :after. Teknik ini telah berjaya diuji dalam Chrome 25 dan Firefox 19. Berikut ialah contoh cara ia berfungsi:

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

Dengan menetapkan "display: inline-block," anda dengan berkesan menukar unsur pseudo :after kepada elemen seperti blok, membenarkan sifat "hiasan teks" berkuat kuasa seperti yang diharapkan. Teknik ini memastikan garis bawah tidak lagi merentangi URL, menghasilkan kesan visual yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Konflik 'text-decoration' dengan :after Pseudo-Elements?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!