Centering Pseudo Elements - html

Question

http://codepen.io/DerekDev/pen/qEwPzd
When you hover on the icons on this menu, you will notice that pseudo elements below it, but for some of them, they aren't centered. Any ideas on how I can center? Thanks.
.nav a:hover:after {
display:block;
}
.nav a.forums:hover:after {
display:block;
}
.nav a:after {
display:none;
background-color:#000000;
content:"Home";
position:absolute;
font-family:'Lato', sans-serif;
text-transform:uppercase;
padding:5px;
top:75%;
border-radius:5px;
}
.nav a.home:after {
content:"Home";
}
.nav a.forums:after {
content:"Forum";
}
.nav a.shop:after {
content:"Shop";
}
.nav a.vote:after {
content:"Vote";
}

Answer 1

Giving li a width gives you somewhere for the :after to adjust to - since those elements don't really go in the dom.
#import url(http://fonts.googleapis.com/css?family=Lato);
.nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 75px;
background-color: #2a2a2a;
}
.nav ul {
position: relative;
margin-top: -.75em !important;
min-width: 25%;
float: right;
}
.nav li {
list-style: none;
float: left;
margin: 30px 10px;
width: 80px;
text-align: center;
display: block;
}
.nav a {
color: #ffffff;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
text-decoration: none;
display: block;
position: relative;
}
.nav a:hover:after {
display: block;
}
.nav a.forums:hover:after {
display: block;
}
.nav a:after {
display: none;
background-color: #000000;
content: "Home";
position: absolute;
text-align: center;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
padding: 5px;
top: 100%;
height: 20px;
right: 0;
left: 0;
border-radius: 5px;
}
.nav a.home:after {
content: "Home";
}
.nav a.forums:after {
content: "Forum";
}
.nav a.shop:after {
content: "Shop";
}
.nav a.vote:after {
content: "Vote";
}
.nav i {
font-size: 250%;
text-align: center;
position: relative;
background: -webkit-linear-gradient(top, #ffffff, #909090);
background: linear-gradient(top, #909090, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 300ms;
}
.nav a:hover > i {
background: -webkit-linear-gradient(top, #909090, #ffffff);
background: linear-gradient(top, #909090, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="nav">
<ul>
<li><a class="home" href="/home"><i class="fa fa-home"></i></a>
</li>
<li><a class="forums" href="/home"><i class="fa fa-book"></i></a>
</li>
<li><a class="shop" href="/home"><i class="fa fa-shopping-cart"></i></a>
</li>
<li><a class="vote" href="/home"><i class="fa fa-check"></i></a>
</li>
</ul>
</div>