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>

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?

• javascript
• html
• css

• 4 Pseudo-elements aren’t present in the DOM, and can’t be targeted/selected with JavaScript; therefore I don’t believe they can be made to act like a <button> or any other interactive element (unless the element to which the pseudo is ‘attached’ also behaves the same way. – David Thomas Commented Oct 6, 2019 at 23:19
• Since the pseudo element is a child of the <span>, you can attach event handlers to that – Phil Commented Oct 6, 2019 at 23:21

1 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>