居中僞元素

Question

http://codepen.io/DerekDev/pen/qEwPzd 當您將鼠標懸停在此菜單上的圖標上時，您會注意到它下面的僞元素，但是對於其中的一些僞元素，它們未居中。任何想法如何我可以中心？謝謝。

.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

給你一個寬度給你一個地方：在適應之後 - 因爲那些元素並不真正進入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>