title: Add a line under the text when hover in css
body: <p>I am building a menu and want to add a line under the text when i hover over the menu. The kind of line i want to add is like this <a href="http://s27.postimg.org/cwbx569f3/home.png" rel="nofollow">Image Link</a></p>
  
  <p>Here is the CSS code:</p>
  
  <pre><code>nav {
      height: 30px;
      width: 100%;
      background: black;
      font-size: 0.9em;
      font-family: 'PT Sans', Arial, sans-serif;
      font-weight: bold;
      position: relative;
  }
  nav ul {
      padding: 0;
      margin: 0 auto;
  }
  
  nav li {
      display: inline;
      float: left;
  }
  
  nav a {
      color: #fff;
      display: inline-block;
      margin:5px 5px 5px 30px ;
      text-align: center;
      text-decoration: none;
      text-shadow: 1px 1px 0px #283744;
  }
  
  nav a:hover, nav a:active {
  
  }
  </code></pre>