Это невозможно. Попробуйте изменить разметку, например:
#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/
а тут пример, где оно и увеличивается и уменьшается
https://jsfiddle.net/0fxyw7xg/1/