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

【问题标题】：Can I make the ::after-content clickable?我可以使 ::after-content 可点击吗？
【发布时间】：2017-11-08 09:34:36
【问题描述】：

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

我还需要使后元素（或其边界）可点击。我怎么能这样做？

我想这不是那么重要，但这里是 ::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;
}

这是标记

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

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

【问题讨论】：

stackoverflow.com/questions/25465397/… 或 stackoverflow.com/questions/21753590/… 的可能重复
当它是链接的一部分时是可点击的 - span.link_wer a:after 并在需要时对 CSS 进行一些更改。
短遮阳篷，是的，有可能。
Only detect click event on pseudo-element的可能重复

标签： css

【解决方案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;    
}

【讨论】：

【解决方案2】：

与往常一样，一旦您尝试，事情就会变得非常简单。当然，我的标记组织是错误的。所以如果你真的这样做了

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

而不是

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

通过交换 href 和 span（或者您使用的任何元素作为 :after 或 :before-content 的容器），您就可以开始了。这是有道理的。

【讨论】：

【解决方案3】：

试试这样。我刚刚更改了您的标记和 CSS 属性。我希望这会对你有所帮助。

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

&lt;h3&gt;We can move &lt;a href="#target_options"&gt;&lt;span class="link_wer"&gt;it&lt;span&gt;&lt;/a&gt; easily.&lt;/h3&gt;

【讨论】：