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

enter image description here

The answer is no. There's a good explanation here: stackoverflow.com/questions/7478336/…. Quick revision: another answer there shows a work-around based on whether the click occurred inside/outside the element, but that involves javascript. — Faust
– Faust, Commented Aug 23, 2014 at 19:06
you can't assign a href to a entire div, but you can put a <span> inside a div and make its 100% fit to that div, then href will work(means href works for the <span> but user experience as it for div). then write css for <span> and <a> — Athul AK
– Athul AK, Commented Aug 23, 2014 at 19:29
I wasn't asking to detect click event. I was asking if there is a way that I can make that area clickable using CSS or changing the markup. I have solved the issue too. Please reopen it and I can answer my question. — aniskhan001
– aniskhan001, Commented Aug 24, 2014 at 11:38
@jcaron I didn't want to disable the clickable behavior. I have a workaround of my issue where I changed the markup and some CSS tweaks. Here is the updated link- jsfiddle.net/aniskhan001/o6wn7Lnj/2 Can you vote my question for reopen so that I can add my answer? — aniskhan001
– aniskhan001, Commented Aug 24, 2014 at 12:05
@KevinB The question is "How to make the area of CSS pseudo-element clickable?" Not "How to make the CSS pseudo-element clickable?" — aniskhan001
– aniskhan001, Commented Sep 4, 2014 at 19:05

matchboxhero · Accepted Answer · 2016-11-24 09:34:42Z

11

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.

answered Nov 24, 2016 at 9:34

matchboxhero

1211 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

roberrrt-s Over a year ago

Regardless if this works, .foo is a child element of a in this case, which isn't affected by the pointer-events: none

matchboxhero Over a year ago

Funny, it worked when I tried it on his fiddle link.

nsilva Over a year ago

Works for me ;D

Nikitas IO Over a year ago

Thank you for actually answering the original question asked!

user110357 · Accepted Answer · 2017-01-12 14:41:36Z

I confirm the fix suggested by matchboxhero, and I share the concern of Roberrrt.

Hence I suggest moving your special class to the itself, or better still apply it to the outer container.

In other words, you create the specific behaviour either on the element that itself gets the special class (foo), or child elements thereof. But not the parent, or preceding/following sibling, or whatever else...:

.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>

Salix · Accepted Answer · 2017-03-25 22:15:11Z

1

Is there a reason for the clickable item to be made as an ::after?

Because, if not, a work around would be to put your anchor after .foo instead. Keeping the 'position: absolute' gives it the same position as your ::after item since the anchor is still in the container div.

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

an updated fiddle: http://jsfiddle.net/wagor93h/3/.

That way, the pointers event on the foo div can still happen. (if it's text, for say, not being able to select any of it wouldn't be optimal)

answered Mar 25, 2017 at 22:15

Salix

1,3839 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related