title: event.stopPropagation doesn't work for pseud elements?
body: <p>I have a ul element, which has three  li children elements, and the ul ele has a useCapture event handler for click. In the click event handler, I stop the event via: event.stopPropagation(), so far as everything works as expected perfectly: when you click the ul/li, the event will be stoped.</p>
  
  <p>But when I add a pseudo element for ul via css ::after, things work not well for this child pseudo element, when I click the pseudo element, the click event was not stopped, and In the debugger panel of Chrome, I checked the event listener for pseudo element is totally same as the li elements.</p>
  
  <p>Here are my main codes:</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-js lang-js prettyprint-override"><code>document.querySelector('#ul').addEventListener(
    'click',
    e =&gt; {
      console.log('clicked')
    },
    false
  )
  document.querySelector('#ul').addEventListener(
    'click',
    e =&gt; {
      e.stopPropagation()
    },
    true
  )</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#ul::after {
    content: 'child';
    width: 100%;
    height: 20px;
    border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="list" id="ul"&gt;
    &lt;li class="item"&gt;foo&lt;/li&gt;
    &lt;li class="item"&gt;bar&lt;/li&gt;
    &lt;li class="item"&gt;baz&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>