css - 如何通过点击 :before 内容导航到另一个页面？

Question

我正在尝试通过单击 :before 此卡的内容导航到另一个页面，但它不起作用

jsx：

<div className="inner-container-one">
   <Link to="/programDetails">
       <img src={psycho} alt="" />
   </Link>
</div>

scss：

.inner-container-one {
    position: relative;

    &:before {
      content: "weight training ➔";
      vertical-align: middle;
      position: absolute;
      background: orange;
      z-index: 999;
      cursor: pointer;
   }
}

输出：

有没有办法让我可以通过点击 :before 伪元素导航到另一个页面？

标签： csssasspseudo-element