title: Position a pseudo elements li :after beyond li
body: <p>I have a menu with a ul list.</p>
  
  <p>I need to add a small text below each <code>&lt;li&gt;</code></p>
  
  <p>Unfortunately i can’t add the html elements because it is a native CMS menu (i can make an override but i would like to find an other way).</p>
  
  <p>so here is what i’ve done :</p>
  
  <p>DEMO : <a href="http://jsfiddle.net/Vinyl/6dcnztax/" rel="nofollow">http://jsfiddle.net/Vinyl/6dcnztax/</a></p>
  
  <p>I apply a <code>position: relative;</code> to the <code>&lt;li&gt;</code> and a <code>position: absolute;</code> to the <code>li:after</code></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="item-131"&gt;text 1&lt;/li&gt;
      &lt;li class="item-132"&gt;text 2&lt;/li&gt;
      &lt;li class="item-133"&gt;text 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul {
      font-size: 16px;
  }
  ul li {
      height: 15px;
      line-height: 15px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      padding: 5px 20px 5px 5px;
  }
  .item-131 {
      position: relative;
  }
  .item-131:after {
      content:"small text 1";
      font-size: 13px;
      color: #88857d;
      position: absolute;
      top:15px;
      left:5px;
      width: 100%;
  }
  .item-132:after {
      content:"small text 2";
      font-size: 13px;
      color: #88857d;
      width: 100%;
  }
  .item-133:after {
      content:"small text 3";
      font-size: 13px;
      color: #88857d;
  }
  </code></pre>
  
  <p>Do you know if there is a better way ?</p>