html - 居中伪元素

Question

所以我尝试使用 CSS 将这个三 Angular 形居中到 a 元素的中心，这是 CodePen: http://codepen.io/DerekDev/pen/yyjqvd

如您所见，当您将鼠标悬停在菜单项上时，三 Angular 形不在中心，而是偏向右侧。

.menu a {
  color:#ffffff;
  text-decoration:none;
  font-family:'Roboto', sans-serif;
  font-size:24px;
  padding-left:20px;
  padding-right:20px;
  padding-top:23px;
  padding-bottom:23px;
  transition:.5s;
}
.menu a:hover:after {
  opacity:1.0;
}
.menu a:after {
  transition:.5s;
  opacity:0.0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #217aa4;
  position:absolute;
  content:"";
  top:75px;
}
.menu a:hover {
  background-color:#217aa4;
}

感谢任何帮助。

Answer 1

伪元素使用绝对位置，在这种情况下你需要相对于a父元素:

.menu a {
  position:relative;
}

然后使用 left 和 translate 的组合来获得完美的中心:

.menu a:after {
  position:absolute;
  content:"";
  top:100%;
  left:50%;
  transform:translateX(-50%)
}

CodepenDemo