Html “定心伪元素”；插入符号“；无相对位置

我有一个小插入符号，用于在一些菜单项上显示鼠标悬停状态。悬停只会添加一个名为

菜单插入符号

的小类，我添加了一个伪元素来添加一个小插入符号

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

我遇到的问题是，我想将每个插入符号居中（菜单项的大小/宽度是动态的，但也保持了我在这里的悬停子菜单的完整性）

下面是一个完整的工作示例（没有插入符号修复）——

我知道我可以这样做：

    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%的页面宽度）。有没有办法在不弄乱我的子菜单的情况下使用居中插入符号？

您可以更改创建插入符号的相对容器。例如，将其移动到

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