如何在溢出内部建立链接：隐藏的侦听器可单击？

Question

我正在尝试在list元素中单击一个链接。列表元素使用:after伪元素设置样式，因为隐藏了链接中的最后一个字符。

这是我的jsfiddle

我需要纯粹的CSS解决方案。我可以使用JavaScript。

由于

Answer 1

我不知道您为什么使用:after伪像那样或者您想要在那里完成的事情。

但无论如何，为了修复它并使链接可以点击，您需要在pointer-events: none;伪使用:after，这应该适合您。

更新样式表，如：

ul li:after {
    content:'';
    pointer-events: none; /* Add this */

    /* Other properties */
}

Demo

Answer 2

这种情况不是由overflow:hidden;引起的，而是由于您的:after伪元素覆盖所有其他内容“阻止”链接。

因此，只需将pointer-events:none;添加到:after伪，这样它就不会注册鼠标事件，而是将其“传递”到下面的链接

Updated Fiddle

More on pointer-events from MDN

  

CSS属性指针 - 事件允许作者控制什么   情况（如果有的话）特定的图形元素可以成为   鼠标事件的目标。

     

除了表明该元素不是鼠标的目标   事件，值none指示鼠标事件“通过”   元素和目标代替那个元素“下面”。

考虑到这一点 - 根据所需的浏览器支持 - 指针事件可能还不够。