How to make the area of CSS pseudo-element clickable?

Question

Here's the FIDDLE for play around.

I have created <div class="foo"> and have a generated CSS content using .foo:after.
I want to have that generated content clickable by setting a link.

If I wrap the .foo with an anchor it creates a link around .foo and .foo:after.
However I want to make the area of .foo:after clickable, but not the .foo itself.

Is there a way that I can achieve this using pure CSS? Perhaps changing the markup?

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

This should work, it stops the link being clickable but then allows it on the pseudo element using the pointer-events attribute.

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

You should put a class on the link so that it doesn't affect all links.