title: Only detect click event on pseudo-element
body: <p>Please see this fiddle: <a href="http://jsfiddle.net/ZWw3Z/5/" rel="noreferrer">http://jsfiddle.net/ZWw3Z/5/</a></p>
  <p>My code is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p {
      position: relative;
      background-color: blue;
  }
  
  p:before {
      content: '';
      position: absolute;
      left:100%;
      width: 10px;
      height: 100%;
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I would like to trigger a click event only on the pseudo-element (the red bit). That is, I don't want the click event to be triggered on the blue bit.</p>