It is necessary to make the scale and ::before animation increase in size by clicking on ::before , but by clicking on #А3 nothing happened, only on ::before :

 #A3 { width: 150px; height: 150px; background-color: green; position: relative; } #A3:before { content: ""; width: 50px; height: 50px; position: absolute; top: 50px; left: 50px; background-color: black; } 
 <div id="A3"></div>

  • As far as I know, you cannot refer to pseudo-elements from jQuery. - Vadim Prokopchuk

2 answers 2

You cannot catch an event from a pseudo-element. The only way to manually check the coordinates of the click:

 $('#A3').click(function(e) { if (e.pageX > 50 && e.pageX < 100 && e.pageY > 50 && e.pageY < 100) $('#A3').toggleClass('active') }); 
 #A3 { width: 150px; height: 150px; background-color: green; position: relative; } #A3:before { content: ""; width: 50px; height: 50px; position: absolute; top: 50px; left: 50px; background-color: black; transition: all 0.5s; } #A3.active:before { transform: scale(1.2, 1.2) } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="A3"></div>

    It's impossible. Try changing the markup, for example:

     #A3{ width:150px; height:150px; background-color:green; position:relative; } #A3 .pseudo-before{ content:""; width:50px; height:50px; position:absolute; top:50px; left:50px; background-color:black; } var a3bef = document.querySelector('#A3 .pseudo-before'); a3bef.addEventListener('click', scaleUp); function scaleUp() { this.style.transform = 'scale(1.5)'; event.stopPropagation(); } <!DOCTYPE html> <html> <head> <title>google</title> <script type="text/javascript" src="js/jquery-3.1.1.js"></script> <script type="text/javascript" src="js/js.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="lib/animate.css"> </head> <body> <div id="A3"><div class="pseudo-before"></div> </body> </html>

    https://jsfiddle.net/0tcu2ptu/

    and here is an example where it increases and decreases https://jsfiddle.net/0fxyw7xg/1/