Question: 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. 

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.

As you can see its really basic so far and the jsfiddle is here: <http://jsfiddle.net/pCQLN/3/>

I want something like shown in the below image:

---

![enter image description here](https://i.stack.imgur.com/z1VGe.jpg)

---

Thank you for any time you can spare!

Here's my code;

HTML

```
<div id="wrap">
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>
</div>

```

CSS

```
#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;
}

```

Answer: 
Use [`:after`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3a%3aafter) pseudo selector in combination with `hover` pseudo selector.

```
#nav a:hover:after{
    content: "";
    color:#212121;
    display:block;
    width:20px;
    margin:0 auto;
    border-bottom:3px solid #000;
}

```

[**Working Fiddle**](http://jsfiddle.net/venkateshwar/pCQLN/6/)
Add a span, center it and give it the bottom border inside your `a`. Show on hover.

[jsfiddle](http://jsfiddle.net/pCQLN/7/)

```
<div id="wrap">
    <div id="nav">
      <ul>
          <li><a href="#">Home<span class="line"></span></a></li>
        <li><a href="#">About<span class="line"></span></a></li>
        <li><a href="#">Projects<span class="line"></span></a></li>
        <li><a href="#">Blog<span class="line"></span></a></li>
      </ul>
    </div>
    </div>

```