title: Horizontal ::before and ::after for absolute ul
body: <p>Trying to figure out ::before and ::after elements
  I've got a drop down navigation in a form of absolute ul. It's got a fixed width, and i need a filled background around it for navigation to be full screen, yet the subnav being right under parent li.
  Yet, the background appears at the top and the bottom. Not on the sides of it.</p>
  
  <p>Here is html</p>
  
  <pre><code>&lt;li class="parentli"&gt;
    &lt;a href="whatevs"&gt;Link&lt;/a&gt;
    &lt;ul class="subnav"&gt;
      &lt;li class="blankli&gt;&lt;div class="supnavimg"&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li class="navitem"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>ul.subnav {position:absolute;top:15px;}
  ul.subnav::before {
    background-color: green;
    padding: 0 100%;
    content: " ";
  }
  ul.subnav::after {
    background-color: green;
    padding: 0 100%;
    content: " ";
   }
  .blankli {position:relative;}
  .supnavimg {
    position:absolute;
    width:40%;
    right:-100%;
  }
  </code></pre>