javascript - CSS:是否有可能使::after 选择器表现得像一个按钮？

Question

查看下面的代码，您可以看到一个关闭图标 float 在 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-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>