CSS - 元素上的指针，但默认光标（箭头）：after？答案

【问题标题】：CSS - Pointer on element, but default cursor (arrow) on :after?CSS - 元素上的指针，但默认光标（箭头）：after？
【发布时间】：2017-07-06 05:16:25
【问题描述】：

我有一个带有cursor: pointer; 的元素，并希望它的:after 伪元素有cursor: default;（普通鼠标箭头）。

.one {
  display: inline-block;
  padding: 0;
  margin: 4px;
  color: #FFF;
  font-size: 14px;
  background: red;
}

.two {
  cursor: pointer;
}

.two:after {
  content: "\2027";
  padding: 0 5px;
  background: aqua;
  color: #000;
  cursor: default;
}

<div class="one">
  <div class="two">
    Text
  </div>
</div>

但无论我在:after 伪元素中将cursor 设置为什么，它总是显示pointer。

Here 是个难题

我能找到的所有 SO 帖子都没有提供该问题的解决方案。

编辑#1

根据评论，这可能是 Safari 独有的问题。在 Chrome 中测试，一切正常。

【问题讨论】：

为我显示默认光标
@John 我刚刚在 Chrome 中进行了测试，它工作正常。似乎是 Safari 的问题。
cursor: pointer doesn't work on :after element?的可能重复

标签： html css

【解决方案1】：

这似乎是 Safari 中的一个已知问题，其他人也有这个问题。

您可以做的是，将您的“two”类的内容放在另一个 html 标记中，然后在这些标记上应用样式。赞这个https://jsfiddle.net/cornelraiu/L5pyr342/1/：

HTML：

<div class="one">
    <div class="two">
        <span class="pointer">
            Text
        </span>
    </div>
</div>

CSS：

.one {
    display: inline-block;
    padding: 0;
    margin: 4px;
    color: #FFF;
    font-size: 14px;
    background: red;
}

.pointer {
    cursor: pointer;
}
.two:after {
    content: "\2027";
    padding: 0 5px;
    background: aqua;
    color: #000;
}

我知道这是一个“黑客”，但它适用于所有浏览器。

编辑：这里似乎有相同问题的答案，但在旧版本的 Chrome 上仍然存在于较新版本的 Safari 上：cursor: pointer doesn't work on :after element? 以与我相同的方式解决:)

【讨论】：