title: Event listener on a CSS pseudo-element, such as ::after and ::before?
body: <p>I have a <code>div</code> element with a CSS pseudo-element <code>::before</code> used as a close button (instead of using an actual button). How do I apply an event listener to <em>only</em> the pseudo-element?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>