title: Combine :after with :hover
body: <p>I want to combine <code>:after</code> with <code>:hover</code> in CSS (or any other pseudo selector).  I basically have a list and the item with the <code>selected</code> class has an arrow shape applied using <code>:after</code>.  I want the same to be true for objects that are being hovered over but cant quite get it to work.  Heres the code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#alertlist {
    list-style: none;
    width: 250px;
  }
  
  #alertlist li {
    padding: 5px 10px;
    border-bottom: 1px solid #e9e9e9;
    position: relative;
  }
  
  #alertlist li.selected,
  #alertlist li:hover {
    color: #f0f0f0;
    background-color: #303030;
  }
  
  #alertlist li.selected:after {
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="alertlist"&gt;
    &lt;li&gt;Alert 123&lt;/li&gt;
    &lt;li class="selected"&gt;Alert 123&lt;/li&gt;
    &lt;li&gt;Alert 123&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>