CSS：是否可以让 ::after 选择器像按钮一样工作？

Question

看下面的代码，你可以看到在一个 span 元素右侧浮动了一个关闭图标。

span {
    width: 100%;
    display: inline-block;
}

span:after {
    content: "\2715";
    float: right;
    position: absolute;
}

span:hover:after {
    cursor: pointer;
}

<span>Content</span>

我希望:after能够表现得像一个按钮。正如您所看到的，它在悬停时会使光标变为指针。我该如何让它表现得像一个按钮？例如，我如何向它添加一个onclick函数？

- Martín Nieva

---

伪元素不存在于DOM中，不能用JavaScript进行定位和选择；因此我认为它们无法像<button>或其他交互式元素一样工作（除非该伪元素所附加的元素也具有相同的行为）。 - David Thomas

由于伪元素是<span>的子元素，因此您可以将事件处理程序附加到它。 - Phil

Answer 1

一般来说，伪元素将继承分配给拥有它的非伪元素的事件和事件行为。

例如，向上面的<span>添加click事件监听器会导致该元素的任何伪元素继承相同的点击事件行为。

如果您想在伪元素和“拥有者”元素之间实现独立性，以实现click行为的独立性（即仅针对“伪”元素的点击行为），则可以使用如下所示的pointer-events CSS属性：

const span = document.querySelector("span");

span.addEventListener("click", () => alert("hey!"));

span {
    display: inline-block;
    position: relative;
    background:red;
    /* Blocks the click event from firing when span is clicked */
    pointer-events:none;
}

span:after {
    content: "'Pesudo button' - click me!";
    position: absolute;
    margin-left:1rem;
    background:green;
    width:15rem;
    text-align:center;
    color:white;
    /* Allows the click event to fire when the pesudo element is clicked */
    pointer-events:all;
}

span:hover:after {
    cursor: pointer;
}

<span>I own the pesudo element</span>

- Dacre Denny