html - 居中伪元素

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

给 li 一个宽度给你一个地方让 :after 调整到 - 因为那些元素并没有真正进入 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>