:before :after pseudo class full width bars

HTML

<ul>
    <li>list element</li>
    <li>list element</li>
    <li>list element
        <div class="clear"></div>
    </li>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
</ul>

CSS

html, body {
 /*let's limit horizontal scroll*/
 overflow-x:hidden;
}
/*acts as wrapper*/
ul {
 /*center & stack*/
 margin:0px auto;
 width:50%;
 display:block;
}
li {
  position: relative;
  /*this would match the initial :before & :after psuedo class but for the sake of seeing that the <ul> is center aligned we'll make it darker grey*/
  background: #ccc; 
}
li:before, li:after {
  content: "";
     /*width set @ 100% will always make stripes fill screen*/
} 
li:before {
  right: 100%; 
}
li:after {
  left: 100%;
}
li:nth-child(2n),
li:nth-child(2n):before,
li:nth-child(2n):after {background: red; }
.clear {clear:both;}