html - 居中伪元素

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

如您所见，将鼠标悬停在菜单项上时，三角形不是居中，而是在右侧。

.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;
}

任何帮助表示赞赏。

最佳答案

pseudo-element使用absolute位置，在这种情况下，您需要相对于a父对象：

.menu a {
  position:relative;
}

然后结合使用left和translate以获得完美的中心：

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

CodepenDemo

关于html - 居中伪元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28704291/