CodePen

HTML

            
              <ul>
  <li class="f"><a href="#">FIRE</a></li>
  <li class="g"><a href="#">GRASS</a></li>
  <li class="w"><a href="#">WATER</a></li>
</ul>
            
          
!

CSS

            
              ul { list-style: none; }
li { float: left; }
a { 
  color: #333;
  display: inline-block; 
  margin: 0 5px;
  padding: 10px 10px 6px;
  text-decoration: none;
}
	a:hover { color: #FFF; }

.f a { border-bottom: 4px solid red; }
	.f a:hover { background: red; }
.g a { border-bottom: 4px solid green; }
	.g a:hover { background: green; }
.w a { border-bottom: 4px solid blue; }
	.w a:hover { background: blue; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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