I want to select pseudo-element :after
This is my css :
show-more:after
{
content : (" > ");
}
JQuery code
$(function(){
$('.show-more:after').click(function() {
alert("Yes");
});
});
It's not possible to bind directly to pseudo-elements, since those are not part of the DOM, but the desired effect can be approximated by binding to a parent element and testing for an offset related to the element that the :after acts upon:
The following renders as ELEMENT++, where clicking on "ELEMENT" and "++" each triggers different behavior:
<span>ELEMENT</span>
span::after {
content: '++';
position: absolute;
}
span.c1 {
background: yellow;
}
span.c2::after {
background: orange;
}
const span = document.querySelector('span');
span.addEventListener('click', function (e) {
if (e.offsetX > span.offsetWidth) {
span.className = 'c2';
} else {
span.className = 'c1';
}
});
Interactive: http://jsfiddle.net/wC2p7/1/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments