Event listener on a CSS pseudo-element, such as ::after and ::before?
-
29-10-2019 - |
Question
I have a div
element with a CSS pseudo-element ::before
used as a close button (instead of using an actual button). How do I apply an event listener to only the pseudo-element?
HTML
<div id="box"></div>
CSS
#box:before
{
background-image: url(close.png);
content: '';
display: block;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
width: 20px;
}
#box
{
height: 100px;
width: 100px;
}
Solution
No. The pseudo-element does not exist in the DOM so it has no HTMLElementNode
object representing it.
OTHER TIPS
Was looking for a solution and found this thread. Now want to share my solution:
CSS
element { pointer-events: none; }
element::after { pointer-events: all; }
JS
element.addEventListener('click', function() { ... });
This works if you don't need any pointer events on element
. Check it in action.
There is no :before and :after selector in jQuery. However as an alternative, you can check the location of the click event and check if it is on your pseudo-element:
(I haven't tested this)
style:
#mything {
width: 100px;
height: 100px;
position: relative;
background: blue;
}
#mything:after {
content: "x";
font-size: 10px;
position: absolute;
top: 0;
right: 0;
background: red;
width: 10px;
height: 10px;
}
javascript:
$('#mything').click(function(e) {
if (e.clientX > $(this).offset().left + 90 &&
e.clientY < $(this).offset().top + 10) {
// do something
}
});
html:
<div id="mything">Foo</div>
If the position and dimensions of the generated content are known, you can add a click handler on the element itself and check the relative mouse position before handling it.
This is perverse, but possible.
Generally speaking no as indicated by others. But in case your tag with pseudo-element is empty, such as glyphicon in bootstrap.
You can wrap a div
or span
or whatever tag suitable in your case. Glyphicons in bootstrap uses :before
but on the page you can see that it has hover
event caught.
Example:
<span>
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
</span>
Suppose you want to add event to the above glyphicon, you can use jquery parent selector
$('glyphicon').parent('span').click(function() {
// awesome things
});
Just a small trick in case your tag is empty.