html - 悬停 HTML 上的 CSS3 中心三 Angular 形

Question

当我将鼠标悬停在每个导航项上时，我试图将我的 css 三 Angular 形居中到每个导航项的中间。目前，三 Angular 形位于每个元素的前字母下方。我该怎么做？

如果我删除 position: absolute，它会删除我的三 Angular 形。我该如何解决这个问题？

.current {
  color: #FFF;
  text-decoration: underline;
}

nav a:hover:after {
  content: "";
  display: block;
  border: 8px solid #405580;
  border-bottom-color: #fff;
  position: absolute;
  bottom: 0px;
}

<header>
  <a href="#" id="logo"></a>
  <nav>
    <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 1

您可以尝试制作您的 <a>亲戚然后让你的nav a :hover :after relative .我添加了 margin-top要向下插入箭头，现在由您来想出一些方法来做到这一点，而无需对其进行硬编码。 :)

a {
 color: #FFF;
 text-decoration: none;
 font-weight: bold;
 position: relative;
}

nav a:hover:after {
    content: "";
    display: block;
    border: 8px solid #405580;
    border-bottom-color: #fff;
    position: absolute;
    left:33%;
    margin-top: 5px;
}

https://codepen.io/daveRanjan/pen/yXyWwR