光标：指针在 :after 元素上不起作用？答案

【问题标题】：cursor: pointer doesn't work on :after element?光标：指针在 :after 元素上不起作用？
【发布时间】：2011-06-09 16:37:01
【问题描述】：

我正在 Chrome 中查看以下示例，但似乎无法让 cursor: pointer 处理 li 的 :after 元素。有没有办法解决这个问题？

http://jsfiddle.net/qKMPQ/2/

【问题讨论】：

奇怪.. 将其添加到 li 而没有 :after 伪类有效。
看起来像一个 chrome 错误，因为它适用于 Firefox。
2013年5月报bug；自 9 月 13 日起没有更新
同样的问题，但在 IE 中：cursor:pointer on pseudo element IE
在 li 元素上使用 css pointer-events: none;，在伪类 ::after 上使用 pointer-events: auto; 或::之前。

标签： html css

【解决方案1】：

不要在:after 元素上设置cursor: pointer，而是在整个li 上设置它，它将同时显示在两者上。

编辑：
对于那些试图在li 及其:after 伪元素上使用不同光标的人，您只需在li 内显式定义内容的cursor 属性。看到这个更新的小提琴：http://jsfiddle.net/qKMPQ/20/

<ul>
    <li>
        <a href="#"></a>
    </li>
</ul>

ul { list-style-type: none; }
li { cursor: pointer; }
a {
    background: red;
    float: left;
    width: 100px;
    height: 100px;
    cursor: help;
    display: block; }
li:after {
    content: "";
    background: yellow;
    float: left;
    width: 100px;
    height: 100px;
    display: block; }

【讨论】：

但是如果我在 li 和它的 :after 伪元素中需要不同的光标怎么办？
@Wex 知道如果<li> 中只有文本该怎么办，但我的:after 伪元素上还需要另一个光标？
没有为我工作，因为 div yellow 没有执行链接的操作。
@AdrianoResende 该示例的目的是在 :after 元素上显示不同的光标
在 li 元素上使用 css pointer-events: none;，在伪类 ::after 上使用 pointer-events: auto; 或::之前。