Pregunta Posible hacer un: después de pseudo elementos en los que se puede hacer clic como parte del enlace.


pseudoelementos a: después de: antes, le permite agregar texto que parece ser parte del enlace. Sin embargo, parece que no puedo encontrar la forma de hacer clic en esa parte como parte del enlace.

Por ejemplo, el siguiente css muestra la url posterior:

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

... pero no se podrá hacer clic.

¿Alguien puede evitar esto sin cambiar el HTML subyacente?

Editar: Estoy usando Chrome 13.0.782.107. Resulta que es un error. (Gracias Sean)


32
2017-08-15 17:06


origen


Respuestas:


Parece que ha descubierto un error en el navegador que está utilizando.

Basado en especulación, el contenido generado debe tratarse como niño del elemento para el que se genera. Creé un JSFiddle para probar esto, y el texto generado está vinculado para mí en la mayoría de los navegadores (Chrome 13 es la única excepción). Supongo que está probando en Chrome. Este es un error reproducible.

La solución es simplemente especificar un color de fondo en sus enlaces ... si desea poder usar esto para todos los enlaces, declarar una imagen de fondo (pero no especificar una imagen, o usar un .gif - o como acabo de señalar, opacity a cualquier cosa que no sea 1) trabajos.


27
2017-08-15 17:20



He tenido el mismo problema y aparentemente si configuro

a { vertical-align: middle; }

(por lo tanto, en el enlace en sí, no el pseudo elemento), funciona.


3
2017-08-09 14:38



Solo agrega esto a tu css:

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

Si el tamaño de la URL varía, deberá usar javascript para obtenerla.


2
2017-08-15 17:43



Espero que alguien tenga una solución mejor que esta, pero por las dudas, surgió esta solución horrible / cutre / hacky:

  a {
     margin-right: 40px;
  }

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

1
2017-08-15 17:45



El: antes y después de agregar contenido antes de y después el selector En CSS, no hay selector que le permita obtener y editar el contenido dentro de una etiqueta. La única forma de que esto ocurra sería con jQuery o javascript para editar realmente el HTML.


0
2017-08-15 17:19



Para evitar modificar el árbol de documentos, puede usar un controlador de clic de JavaScript para a:after.

Editar: Esto no funciona, porque los pseudo elementos no se agregan al DOM.


0
2017-08-15 17:34



Envolví el enlace y el texto por separado: el: antes va en el contenedor y el enlace entra. De esta forma puedo usar: before como jQuery tigger y el texto como enlace. 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});

Estoy usando esto para crear un cambio de ocultar / mostrar en un árbol - esto me da el botón que necesito a la izquierda y me permite unirme al padre.

open toggle with link

closed toggle with link


0
2018-06-20 17:28