Pertanyaan Kemungkinan untuk membuat: setelah / sebelum elemen semu dapat diklik sebagai bagian dari tautan?


elemen pseudo a: setelah: sebelum memungkinkan Anda menambahkan teks yang tampaknya merupakan bagian dari tautan. Namun, saya tidak bisa mencari cara untuk membuat bagian itu dapat diklik sebagai bagian dari tautan.

Misalnya css berikut menunjukkan url sesudahnya:

  a:after {
     content: " (" attr(href) ")";
  }

... tetapi itu tidak akan bisa diklik.

Adakah yang mengatasi ini tanpa mengubah HTML yang mendasarinya?

Edit: Saya menggunakan chrome 13.0.782.107. Ternyata itu a bug. (Terima kasih, Sean)


32
2017-08-15 17:06


asal


Jawaban:


Sepertinya Anda telah menemukan bug di browser yang Anda gunakan.

Berdasarkan pada spesifikasi, konten yang dihasilkan harus diperlakukan sebagai anak dari elemen yang dihasilkan untuk. Saya membuat sebuah JSFiddle untuk menguji ini, dan teks yang dihasilkan terhubung untuk saya di sebagian besar browser (Chrome 13 menjadi pengecualian soliter.) Tebakan saya adalah bahwa Anda menguji di Chrome. Ini adalah bug yang dapat direproduksi.

Solusinya adalah dengan hanya menentukan warna latar belakang pada tautan Anda ... jika Anda ingin dapat menggunakan ini untuk semua tautan, menyatakan gambar latar belakang (tetapi tidak menentukan gambar, atau menggunakan transparan .gif - atau seperti yang ditunjukkan, pengaturan opacity untuk apa pun selain 1) bekerja.


27
2017-08-15 17:20



Saya memiliki masalah yang sama dan sepertinya jika saya mengaturnya

a { vertical-align: middle; }

(dengan demikian pada tautan itu sendiri, tidak elemen pseudo), berfungsi.


3
2017-08-09 14:38



Cukup tambahkan ini ke css Anda:

a {padding-right:Ypx} /* Y = size of your url in pixels */

Jika ukuran URL bervariasi Anda harus menggunakan javascript untuk mendapatkannya.


2
2017-08-15 17:43



Saya berharap seseorang memiliki solusi yang lebih baik daripada ini, tetapi untuk jaga-jaga tidak, saya muncul dengan solusi yang mengerikan / buruk / peretasan ini:

  a {
     margin-right: 40px;
  }

  a:after {
     content: " (" attr(href) ")";
     margin-left: -40px;
  }

1
2017-08-15 17:45



The: before and: after add content sebelum dan setelah pemilih. Di CSS, tidak ada pemilih yang memungkinkan Anda mendapatkan dan mengedit konten di dalam tag. Satu-satunya cara untuk mewujudkannya adalah dengan jQuery atau javascript untuk benar-benar mengedit HTML.


0
2017-08-15 17:19



Untuk menghindari modifikasi pohon dokumen, Anda bisa menggunakan penangan klik JavaScript untuk a:after.

Edit: Ini tidak berfungsi, karena elemen pseudo tidak ditambahkan ke DOM.


0
2017-08-15 17:34



Saya membungkus tautan dan teks secara terpisah - yang: sebelum masuk ke penampung dan tautan masuk ke dalam. Dengan cara ini saya dapat menggunakan: sebelumnya sebagai jQuery tigger dan teks sebagai tautan. HTML:

<li class="before-here"><a href="#">My Link Text</a></li> 

CSS:

li.before-here:before{ //some css like an image }

Jquery:

$("li.before-here").click(function(){ //do something});

Saya menggunakan ini untuk membuat toggle hide / show di pohon - ini memberi saya tombol yang saya perlukan di sebelah kiri dan memungkinkan saya untuk menautkan ke induknya.

open toggle with link

closed toggle with link


0
2018-06-20 17:28