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 函数？

Answer 1

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

例如，将click事件侦听器添加到上述<span>将导致该 span elemenet 的任何伪元素继承相同的点击事件行为。

如果你想在伪元素和"所有者"元素之间实现独立，就click行为而言(即仅"伪"元素的点击行为(，你可以使用pointer-eventsCSS 属性，如下所示：

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>