Question

所以我试图使用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;
}

感谢任何帮助。

Answer 1

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

.menu a {
  position:relative;
}

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

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

CodepenDemo

Answer 2

将此添加到您的.menu a:after：

left: calc(50% - 37.5px);

这是.menu a：

position: relative;

这是一个小提琴：http://jsfiddle.net/c9br43sv/

以伪元素为中心

2 个答案:

CodepenDemo