CodePen

HTML

            
              <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">another item</a></li>
    <li><a href="#">and another</a></li>
</ul>

            
          
!

CSS

            
              
/*--- THE EFFECT ---*/
ul{ width:100%; text-align:justify; }
ul::after{ content:''; display:inline-block; width:100%; }
  ul li{ display:inline-block; background:#DDD; }
		

/*--- PAGE RESET ---*/
body{ font:2em arial; }
*{ margin:0; padding:0; }
ul{ list-style:none; }
a{ text-decoration:none; text-transform:capitalize; color:#444; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // just make sure there is a whitespace between the DOM nodes...
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................