css - 我可以使::after-content 可点击吗？

Question

我使用::after 作为一种工具提示向 span 元素添加一些内容。 由于后内容比跨度元素本身大，并且不在跨度元素边界内，因此它不可单击。

我需要使后元素(或其边界)也可点击。我怎样才能做到这一点？

我想这不是那么重要，但这是::after-“代码”:

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;
}

这是标记

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

所以我在“it”这个词上得到了某种工具提示，当“it”触发链接时，后面的内容“它实际上是什么？”不会，因为它故意偏离其父元素边界。我能做什么来解决这个问题？

Answer 1

伪元素属于它们的父元素，因此如果它们的父元素是可点击的(button、a)，那么您可以使它们可点击。因此，您可以做的是将 a 的伪元素设置为 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;    
}