Adding a link to a pseudo element

Question

I'm wondering if there is a way to add a link to a pseudo element. I thought it would work with content: url(), but it isn't

    content: url('https://google.com');
    width: 100px;
    height: 100px;
}

You cannot add html elements with the CSS3 ::after or ::before selectors. The content:"" property will only accept plain text. Your best option is to use a JavaScript alternative. — Luís P. A., Nov 25 '21 at 15:29
Does this answer your question? [How to make the area of CSS pseudo-element clickable?](https://stackoverflow.com/questions/25465397/how-to-make-the-area-of-css-pseudo-element-clickable) — Sfili_81, Nov 25 '21 at 15:29

score -2 · Answer 1 · answered Nov 25 '21 at 15:49

As I searched about it, it seems that it is not possible by the standard way. But you can achieve this through some workarounds. Here is the solution I can think of:

<div class="clickable-pseudo">
  <a href="-- your desired  url --" target="_blank"></a>
</div>

div.clickable-pseudo::after{
  content: "";
  width: 30px;
  height: 30px;
  background-color: indianred;
  display: block;
  position: relative;
}

a{
  position: absolute;
  top:0px;
  left: 0px;
  width: 30px;
  height: 30px;
  display: block;
  z-index: 10;
}

The above code simply puts the anchor tag on the pseudo element.

Adding a link to a pseudo element

1 Answers1