html - 居中伪元素 "caret"没有相对位置

Question

我有一个小插入符号，用于某些菜单项上的悬停状态。悬停只是添加了一个名为 menu-caret 的小类，我添加了一个伪元素来添加一个小插入符。

carret 的 css 看起来像这样:

.menu-caret::before {
    content:"";
    position: absolute;
    margin-left: 20px;
    bottom: 0;
    width: 0%;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

我遇到的问题是，我想将每个插入符号居中(菜单项的大小/宽度是动态的，但也要保持我在此处放置的悬停子菜单的完整性

这是一个完整的工作示例(没有插入符修复)- http://codepen.io/ajmajma/pen/KgGxWL

我知道我可以做这样的事情:

    ul {
  width: 100%;
  position: relative;
  display: inline-block;
  list-style-type: none;
}
li {
  padding: 20px;
  float: left;
  position: relative;
}
.menu-caret::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  margin-left: -5px;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

但是在添加相对位置时，它会弄乱子菜单的大小(应该是 100% 页面宽度)。有什么方法可以在不弄乱我的子菜单的情况下使插入符居中吗？

Answer 1

您可以更改在其上创建插入符号的相关容器。例如将它移动到 a 标签:

.menu-caret > a::after {
  content:"";
  position: absolute;
  left:50%;
  margin-left: -5px;
  bottom: -10px;
  width: 0%;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}
.menu > ul > li a {
  position: relative;
}

CodepenDemo