html - content - ¿Cómo hacer clic en el área de pseudo-elementos CSS?

title html css

Question

Aquí está el FIDDLE para jugar.

He creado <div class="foo"> y tengo un contenido CSS generado usando .foo:after .
Quiero que se pueda hacer clic en ese contenido generado mediante la configuración de un enlace.

Si .foo el .foo con un ancla, se crea un enlace alrededor de .foo y .foo:after .
Sin embargo, quiero hacer el área de .foo:after hacer clic, pero no el .foo sí.

¿Hay alguna manera de que pueda lograr esto usando CSS puro? Tal vez cambiando el marcado?

HTML

<div class="container">
    <a href="http://example.com">
        <div class="foo"></div>
    </a>
</div>

CSS

.foo{
    width: 400px;
    height: 150px;
    background-color: #DFBDE0;
}

.foo:after{
    content: "";
    position: absolute;
    background-color: #CB61CF;
    width: 100px;
    height: 100px;
    right: 0;
}

Screeshot

Answer 1

¿Hay alguna razón para que el elemento seleccionable se haga como un :: después?

Porque, si no, una solución alternativa sería colocar el ancla después de .foo en su lugar. Mantener la ''posición: absoluta'' le da la misma posición que su elemento :: after ya que el ancla todavía está en el div contenedor.

<div class="container">
  <div class="foo"></div>
  <a class="after" href="http://example.com">CLICK ME !</a>
</div>

un violín actualizado: http://jsfiddle.net/wagor93h/3/ .

De esa manera, el evento de punteros en el div foo div puede seguir ocurriendo (Si es texto, por ejemplo, no poder seleccionar ninguno de ellos no sería óptimo)

Answer 2

Confirmo la solución sugerida por matchboxhero y comparto la preocupación de Roberrrt.

Por lo tanto, sugiero mover su clase especial a sí mismo, o mejor aún, aplicarla al contenedor exterior.

En otras palabras, crea el comportamiento específico en el elemento que obtiene la clase especial (foo) o elementos secundarios del mismo. Pero no el padre, o el hermano anterior / siguiente, o cualquier otra cosa ...:

.foo.container{
    width: 550px;
    position: relative;
}

.foo a div {
    width: 400px;
    height: 150px;
    background-color: #DFBDE0;
}

.foo a div:after{
    content: "";
    position: absolute;
    background-color: #CB61CF;
    width: 100px;
    height: 100px;
    right: 0;
}
.foo a {
  pointer-events: none;
}

.foo a div:after{
    pointer-events: all;
}

<div class="foo container">
    <a href="http://example.com">
        <div></div>
    </a>
</div>

Answer 3

Esto debería funcionar, impide que se pueda hacer clic en el enlace, pero luego lo permite en el pseudo-elemento utilizando el atributo puntero-eventos.

a {
  pointer-events: none;
}

.foo:after{
    pointer-events: all;
}

Debe colocar una clase en el enlace para que no afecte a todos los enlaces.