27

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

aniskhan001
  • 7,981
  • 8
  • 36
  • 57
  • 8
    The answer is no. There's a good explanation here: http://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element. Quick revision: another answer there shows a work-around based on whether the click occurred inside/outside the element, but that involves javascript. – Faust Aug 23 '14 at 19:06
  • you can't assign a href to a entire div, but you can put a inside a div and make its 100% fit to that div, then href will work(means href works for the but user experience as it for div). then write css for and – Athul AK Aug 23 '14 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 Aug 24 '14 at 11:38
  • See http://stackoverflow.com/a/4416239/3527940 for a way to disable the clickable behaviour of the div. Experimental and not widely supported, though. – jcaron Aug 24 '14 at 11:58
  • 1
    @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- http://jsfiddle.net/aniskhan001/o6wn7Lnj/2/ Can you vote my question for reopen so that I can add my answer? – aniskhan001 Aug 24 '14 at 12:05
  • Why would you do this when you can just add an extra HTML element? – mcometa Aug 24 '14 at 12:11
  • @mcometa I wasn't sure how to achieve this at the beginning. Please read the last line of my question. I was also asking if this can be done using changing the markup. – aniskhan001 Aug 24 '14 at 12:14
  • *"I am not asking to detect click event. I was asking if there is a way that I can make that highlighted area (see screenshot) clickable"* uhm... aren't those two things the exact same thing? if you can't detect a click event.. you can't make it clickable.. – Kevin B Sep 04 '14 at 18:55
  • @KevinB, yes, same but there's a sentence "**Perhaps changing the markup?**" – aniskhan001 Sep 04 '14 at 18:56
  • well of course. you can get rid of the pseudo element and use a real element. figured that was obvious, but outside of the scope of what you wanted. – Kevin B Sep 04 '14 at 18:56
  • @KevinB The fact here is, I cannot get rid of this and I need to apply the link only on pseudo element. Not on the real div. – aniskhan001 Sep 04 '14 at 19:00
  • Then the answer is in the duplicate question. Not possible. – Kevin B Sep 04 '14 at 19:00
  • @KevinB By changing the markup it is possible. Here is the demo: http://jsfiddle.net/aniskhan001/o6wn7Lnj/2/ – aniskhan001 Sep 04 '14 at 19:02
  • The pseudo element still is not clickable. you are "using html instead". – Kevin B Sep 04 '14 at 19:03
  • 1
    @KevinB The question is "How to make **the area of CSS pseudo-element** clickable?" Not "How to make **the CSS pseudo-element** clickable?" – aniskhan001 Sep 04 '14 at 19:05
  • Does it change anything that the accepted answer to the duplicate also explains exactly how to solve this problem, which is what you did to solve it? it's the same question, with the same answer. Why do we need two of them. – Kevin B Sep 04 '14 at 19:09
  • You asking: «Is there a way that I can achieve this using pure CSS?». The aswer is no. You even cannot make it hoverable. E.g. `.foo:after:hover` is not working – Naeel Maqsudov Apr 19 '16 at 04:37

3 Answers3

8

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.

matchboxhero
  • 91
  • 1
  • 6
5

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>
user110357
  • 59
  • 1
  • 1
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)

Salix
  • 1,290
  • 9
  • 15