title: Thick underline when hover
body: <p>I'm trying to create a thick underline when the mouse hover over the word (For Navigation Bar). But I noticed that the underline is much longer than the word &amp; there's huge gap between the word and the underline. How can make the underline the same length as the word (similar to <code>text-decoration: underline</code>) and also a small gap.</p>
  
  <p>Below is my code and an image of the outcome.</p>
  
  <pre><code>nav &gt; ul &gt; li:hover &gt; a { 
  border-bottom: 2px solid #F117B4;
  text-decoration: none; 
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dNnZA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dNnZA.jpg" alt="http://i735.photobucket.com/albums/ww358/roundeworld/Sale_zps6c9e169b.jpg"></a></p>
  
  <p>This is the whole code for the navigation bar.</p>
  
  <pre><code>nav { font-family: Open Sans Condensed; letter-spacing: 1px; }
  
  nav { position: relative; border-bottom: 1px {{ settings.border_style }} {{ settings.border_color }}; /*border-top: 1px {{ settings.border_style }} {{ settings.border_color }};*/ }
  
  nav &gt; ul &gt; li {  margin-bottom: 0; }
  
  nav &gt; ul &gt; li &gt; a { text-decoration: none; color: {{ settings.nav_link_color }}; display: block; padding: 0 15px; font-size: 17px/*font-size: {{ settings.nav_font_size }}*/; 
  line-height: {{ settings.nav_line_height }}; height: {{ settings.nav_line_height }}; font-weight: {{ settings.nav_weight }}; text-transform: {{ settings.nav_font_style }}; }
  
  nav &gt; ul &gt; li &gt; a.current {  color: {{ settings.selected_nav_link_color }}; }
  
  nav &gt; ul &gt; li:hover &gt; a { display:inline; border-bottom: 2px solid #F117B4; color: {{ settings.nav_link_hover_color }}; text-decoration: none; }
  
  nav &gt; ul &gt; li.dropdown { position:relative; }
  
  nav &gt; ul &gt; li.dropdown &gt; .dropdown { background: {{ settings.nav_dropdown_background_color }}; list-style: none outside none; padding: 5px 15px; display: none; position: absolute; min-width: 180px; z-index: 99999; top: 100%; left: 0%; margin-left: 15px; border: 1px solid {{ settings.border_color }}; }
  
  nav &gt; ul &gt; li.dropdown:hover &gt; .dropdown { display: block; z-index: 999999; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10); box-shadow:0 0 3px rgba(0, 0, 0, 0.10); }
  
  nav &gt; ul &gt; li.dropdown li { list-style: none; font-size: 13px; line-height: 30px; }
  </code></pre>
  
  <p>Hi, anyone has a solution for this? :( Please help me. Thanks.</p>