Möglich, a:after/before-Pseudoelemente als Teil des Links anklickbar zu machen?

Pseudoelemente a:after a:before erlauben Ihnen, Text hinzuzufügen, der Teil des Links zu sein scheint. Ich kann jedoch keine Möglichkeit finden, diesen Teil als Teil des Links anklickbar zu machen.

Zum Beispiel zeigt das folgende CSS die URL danach:

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

…aber es wird nicht anklickbar sein.

Kann das jemand umgehen, ohne den zugrunde liegenden HTML-Code zu ändern?

Bearbeiten: Ich verwende Chrome 13.0.782.107. Es stellt sich heraus, es ist ein Insekt. (Dank Sean)

Es sieht so aus, als hätten Sie einen Fehler in dem von Ihnen verwendeten Browser entdeckt.

Basierend auf spezsollte der generierte Inhalt als a behandelt werden Kind des Elements, für das es generiert wird. Ich habe eine erstellt JSFiddle um dies auszuprobieren, und der generierte Text ist für mich in den meisten Browsern verlinkt (Chrome 13 ist die einzige Ausnahme). Ich vermute, dass Sie in Chrome testen. Dies ist ein reproduzierbarer Fehler.

Die Problemumgehung besteht darin, einfach eine Hintergrundfarbe für Ihre Links anzugeben … wenn Sie diese für alle Links verwenden möchten, ein Hintergrundbild zu deklarieren (aber kein Bild anzugeben oder eine transparente .gif – oder wie gerade erwähnt, Einstellung opacity zu etwas anderem als 1) funktioniert.

Ich habe das gleiche Problem gehabt und anscheinend, wenn ich eingestellt habe

a { vertical-align: middle; }

(also auf dem Link selbst, nicht das Pseudo-Element), es funktioniert.

Ich hoffe, jemand hat eine bessere Lösung als diese, aber für den Fall, dass dies nicht der Fall ist, habe ich mir diese schreckliche / beschissene / hackige Lösung ausgedacht:

  a {
     margin-right: 40px;
  }

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

Fügen Sie dies einfach zu Ihrem CSS hinzu:

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

Wenn die Größe der URL variiert, müssen Sie Javascript verwenden, um sie abzurufen.

Wenn Sie einen Link auf Wrapper haben, können Sie Pseudo-Elemente per Einstellung anklickbar machen pointer-events Zu keiner.

a:after {
 pointer-events: none;
}

Um eine Änderung des Dokumentbaums zu vermeiden, könnten Sie einen JavaScript-Klick-Handler für verwenden a:after.

Bearbeiten: Das funktioniert nicht, weil dem DOM keine Pseudoelemente hinzugefügt werden.

Die :before und :after fügen Inhalt hinzu Vor und nach der Selektor. In CSS gibt es keinen Selektor, mit dem Sie den Inhalt eines Tags abrufen und bearbeiten können. Die einzige Möglichkeit, dies zu erreichen, wäre mit jQuery oder Javascript, um den HTML-Code tatsächlich zu bearbeiten.