web-dev-qa-db-fra.com

Possible de faire un: après / avant des pseudo-éléments cliquables dans le cadre du lien?

les pseudo-éléments a: après a: avant vous permettent d'ajouter du texte qui semble faire partie du lien. Cependant, je n'arrive pas à trouver un moyen de rendre cette partie cliquable dans le cadre du lien.

Par exemple, le css suivant affiche l'URL après:

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

... mais il ne sera pas cliquable.

Quelqu'un contourne-t-il cela sans changer le HTML sous-jacent?

Edit: J'utilise chrome 13.0.782.107. Il s'avère que c'est un bug . (Merci Sean)

htmlcssgoogle-chromepseudo-element
35
Catskul

Il semble que vous ayez découvert un bogue dans le navigateur que vous utilisez.

Sur la base de spec , le contenu généré doit être traité comme un enfant de l'élément pour lequel il est généré. J'ai créé un JSFiddle pour tester cela, et le texte généré est lié pour moi dans la plupart des navigateurs (Chrome 13 étant l'exception solitaire.) Je suppose que vous testez dans Chrome. Il s'agit d'un bug reproductible.

La solution consiste à simplement spécifier une couleur d'arrière-plan sur vos liens ... si vous voulez pouvoir l'utiliser pour tous les liens, en déclarant une image d'arrière-plan (mais sans spécifier d'image, ou en utilisant un transparent .gif - ou comme cela vient d'être souligné, en définissant opacity sur autre chose que 1) fonctionne .

28
Sean Vieira

J'ai eu le même problème et apparemment si je mets

a { vertical-align: middle; }

(donc sur le lien lui-même, pas le pseudo-élément), ça marche.

3
Tom

Ajoutez simplement ceci à votre css:

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

Si la taille de l'URL varie, vous devrez utiliser javascript pour l'obtenir.

2
Knu

J'espère que quelqu'un a une meilleure solution que cela, mais au cas où non, j'ai trouvé cette solution horrible/merdique/hacky:

  a {
     margin-right: 40px;
  }

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

Le: avant et: après ajouter du contenu avant et après le sélecteur. En CSS, il n'y a pas de sélecteur qui vous permet d'obtenir et de modifier le contenu à l'intérieur d'une balise. La seule façon d'y parvenir serait d'utiliser jQuery ou javascript pour réellement modifier le code HTML.

0
Dan Short

J'ai enveloppé le lien et le texte séparément - le: avant va sur le conteneur et le lien entre à l'intérieur. De cette façon, je peux utiliser le: avant comme un déclencheur jQuery et le texte comme un lien. 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});

J'utilise ceci pour créer une bascule masquer/afficher dans un arbre - cela me donne le bouton dont j'ai besoin à gauche et me permet de créer un lien vers le parent.

open toggle with link

closed toggle with link

0
Daniel Lefebvre

Pour éviter de modifier l'arborescence des documents, vous pouvez utiliser un gestionnaire de clic JavaScript pour a:after.

Edit: Cela ne fonctionne pas, car les pseudo-éléments ne sont pas ajoutés au DOM.

0
paulmelnikow