title: Centre a:hover border and specify width of border
body: <p>Hoping someone could let me know if this is possible as I have searched and couldn't come up with the desired effect I wanted. </p>
  
  <p>I basically want to have the border hover to be centred so when you mouse over the links the border-bottom is centred. I would like the border width to be a fixed size around 20px and centered.</p>
  
  <p>As you can see its really basic so far and the jsfiddle is here: <a href="http://jsfiddle.net/pCQLN/3/" rel="nofollow noreferrer">http://jsfiddle.net/pCQLN/3/</a></p>
  
  <p>I want something like shown in the below image:</p>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/z1VGe.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <p>Thank you for any time you can spare!</p>
  
  <p>Here's my code;</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  &lt;div id="nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#wrap {
      width:40em;
      height:3em;
      margin:0 auto;
  }
  #nav {
      float:right;
      width:75%;
  }
  #nav ul {
      display:inline;
      list-style: none;
      float: right;
  }
  #nav li {
      float: left;
      width:50px padding-right:1em;
  }
  #nav a {
      text-align:center;
      text-decoration:none;
      color: #888;
      font-size:1em;
      float: left;
  }
  #nav a:hover {
      color:#212121;
      display:block;
      width:20px;
      margin:0 auto;
      border-bottom:3px solid #000;
  }
  </code></pre>