如何使 overflow:hidden 列表元素中的 link 可点击？

Question

我正在尝试使列表元素内的 link 可点击。列表元素使用 :after 伪元素设置样式，因为隐藏了 link.

中的最后一个字符

这是我的jsfiddle

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

让它工作

谢谢

Answer 1

我不知道你为什么要使用这样的 :after 伪类，也不知道你想在那里完成什么。

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

像这样更新您的样式表：

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

    /* Other properties */
}

Demo

Answer 2

发生这种情况不是因为 overflow:hidden;，而是因为您的 :after 伪元素覆盖了所有其他内容 'blocking' 链接。

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

Updated Fiddle

More on pointer-events from MDN

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

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

如何使 overflow:hidden 列表元素中的 link 可点击？

How to make a link inside an overflow:hidden listelement clickable?

html

css

pseudo-element

Updated Fiddle