Can I make the ::after-content clickable?

Question

I add some content to a span-element with ::after as a sort of tooltip. As that after-content is bigger then the span-element itself and it's not within the span-elements boundary, it is not clickable.

I'd need to make the after-elements (or its boundaries) clickable too. How could I do that?

I guess it's not so important but here is the ::after-"code":

span.link_wer::after{
   content:'What is it actually?';
   vertical-align:1.8em;
    font-size:0.2em;
    margin-left:-80px;
    border-bottom: 1px solid $color_3;
    padding:5px 10px;
    background:red;
    transition:0.3s;
    opacity:0.2;
}

And here is the markup

<h3>We can move <span class="link_wer"><a href="#target_options">it</a><span> easily.</h3>

So I get sort of tooltip over the word "it" and while "it" triggers a link, the after-content "What is it actually?" doesn't as it is intentionally lying off its parent elements boundary. What can I do to solve that?

Possible duplicate of https://stackoverflow.com/questions/25465397/how-to-make-the-area-of-css-pseudo-element-clickable or https://stackoverflow.com/questions/21753590/pseudo-element-not-clickable — Andrew Adam, Nov 08 '17 at 09:38
It's clickable when it's a part of link - `span.link_wer a:after` and make a little bit changes in CSS if needed. — pavel, Nov 08 '17 at 09:38
Possible duplicate of [Only detect click event on pseudo-element](https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element) — RaJesh RiJo, Nov 08 '17 at 09:59

score 4 · Answer 1 · answered Nov 08 '17 at 09:48

Pseudo-elements belong to their parents, so if their parent is clickable (button, a) then you can make them clickable. So, what you could do is make that pseudo-element of a than span.

span.link_wer a {
  position: relative;
  text-decoration: none;
  color: red;
}

span.link_wer a::after{
  content:'What is it actually?';
  vertical-align:1.8em;
  font-size:0.2em;
  margin-left:-80px;
  border-bottom: 1px solid red;
  padding:5px 10px;
  background: rgba(255, 0, 0, 0.5);
  transition:0.3s;
  color: white;
  font-size: 10px;    
}

score 0 · Accepted Answer · answered Nov 08 '17 at 09:56

As always, things are pretty simple once you're trying. Of course the organisation of my markup was wrong. So if you actually do

<h3>We can move <a href="#target_options"><span class="link_wer">it<span></a> easily.</h3>

instead of

<h3>We can move <span class="link_wer"><a href="#target_options">it</a><span> easily.</h3>

by swapping href and span (or which ever element you're using as the container for the :after or :before-content) you're good to go. Which makes sense.

score 0 · Answer 3 · answered Nov 08 '17 at 10:06

Try like this. I have just changed your markup and CSS property a bit. I hope this will help you.

span.link_wer::before{
   content:'What is it actually?';
   vertical-align:1.8em;
    font-size:0.5em;
   
    border-bottom: 1px solid $color_3;
    padding:5px 10px;
    background:red;
    transition:0.3s;
    opacity:0.2;
    position: absolute;
    top: 3px;
    color: aqua;
}
#target_options {
position:relative;
}

<h3>We can move <a href="#target_options"><span class="link_wer">it<span></a> easily.</h3>

Can I make the ::after-content clickable?

3 Answers3