CSS: Is it possible to make the ::after selector behave like a button?

Question

Look at the code of below, as you can see there is a close icon floated to the right of a span element.

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

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

span:hover:after {
    cursor: pointer;
}

<span>Content</span>

I want the :after to behave like a button. As you could see, it makes the cursor a pointer on hover. How can I make it to behave like a button? For example, how can I add an onclick function to it?

Answer 1

Generally speaking, the pseudo element will inherit the events and event behavior assigned to the non-pseudo element that "owns" it.

So for instance, adding a click event listener to the above <span> will cause any pseudo elements of that span elemenet to inherit the same click event behavior.

If you wanted to achieve independence between the pseudo element and the "owner" element, in terms of click behavior (ie click behavior for the "pseudo" element only) you could use the pointer-events CSS property as shown below:

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>