CodePen

HTML

            
              <nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  box-sizing:border-box;
}

nav {
  width:960px;
  margin:10px auto;
  background:lightgrey;
}

ul {
  font-size:0;
  padding:0 15px;
}

li {
  display:inline-block;
  font-size:18px;
  line-height:1.5em;
  width:25%;
  position:relative;
}

li:hover,
a:hover {
  color:blue;
}

a {
  display:block;
  padding:0 25px;
  text-decoration:none;
}

li:before {
  content:"3";
  position:absolute;
  font-family:"Wingdings";
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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