CodePen

HTML

            
              <nav>
  <ul>
    <li><a class="category" href="#">Home</a></li>
    <li><a class="category" href="#">About</a></li>
    <li><a class="category" href="#">Clients</a></li>
    <li><a class="category" href="#">Contact Us</a></li>
  </ul>
</nav>  


            
          
!
via HTML Inspector

CSS

            
              nav {
  width:960px;
  margin:25px auto;
}

a.category {
  text-decoration:none;
  height:25px;
  background-image: url(http://boagworld.com/wp-content/themes/BoagworldV4/media/tag.png);
  background-repeat:no-repeat;
  background-position:top center;
  padding:0 ;
  display:inline-block;
  margin-bottom:15px;
  line-height:25px;
  position:relative;
}

a.category:before, a.category:after {
  content:"";
  position:absolute;
  height:25px;
  background-image: url(http://boagworld.com/wp-content/themes/BoagworldV4/media/tag.png);
  background-repeat:no-repeat;
}


a:before {
  left:-10px;
  width:10px;
  background-position:top left;
}
a:after {
  left:100%;  
  width:25px;
  height:25px;
  background-position:top right;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................