title: How to make ul list items with pseudo elements stay inside the unordered list?
body: <p>I have a unordered list with a list of items styled as tags. <a href="https://jsfiddle.net/vymrwcnz/1/" rel="nofollow noreferrer">See jsFiddle</a>. But when the tags break into two lines, the arrow of the tags overflows the left side of the <code>ul</code>. How can I avoid this?</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>.searchtags {
    padding: 0;
    margin: 15px 0 5px 0;
    list-style-type: none;
    font-family: arial;
    border: 1px solid red;
    width:300px;
  }
  
  .searchtags li:not(.filterheader) {
    position: relative;
    white-space: nowrap;
    float: left;
    width: auto;
    height: 26px;
    font-size: 12px;
    margin: 5px 15px 0 0;
    padding: 3px 6px 3px 15px;
    background: #fff;
    color: #4a4949;
    border-radius: 2px;
    border: 1px solid #cacaca;
  }
  
  .searchtags li:not(.filterheader):before,
  .searchtags li:not(.filterheader):after {
    position: absolute;
    content: '';
  }
  
  .searchtags li:not(.filterheader):before {
    /* the circle on the left */
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #aaa;
    left: 2px;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="searchtags clearfix"&gt;
    &lt;li class="filterheader"&gt;
      &lt;strong&gt;Tags:&lt;/strong&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Tag&lt;/a&gt;&lt;span aria-hidden="true" class="right" title="Delete"&gt;×&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Long tag&lt;/a&gt;&lt;span aria-hidden="true" class="right" title="Delete"&gt;×&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Tag&lt;/a&gt;&lt;span aria-hidden="true" class="right" title="Delete"&gt;×&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Tag&lt;/a&gt;&lt;span aria-hidden="true" class="right" title="Delete"&gt;×&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Long tag&lt;/a&gt;&lt;span aria-hidden="true" class="right" title="Delete"&gt;×&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your help in advance.</p>