在CSS中设置动画时排除内容

Question

我正试图让我的一部分动画列表项（我正在设置顶部边框的动画）。在成功的同时，它也激活了内部的内容。如何排除其动画？（P.S。：对于错误的术语我很抱歉，我是编码的新手）

 ul{list-style-type: none;
        text-align: center;
        margin: 0 auto;
        padding:0px ;
        overflow: hidden;
        background-color: #333333;
        display:block;}

li{display:inline-block;
        margin: 0px auto;
        border-right: 1px solid black;
        border-bottom: 1px solid black;}

li a{display:inline-block;
      background-color: #333333;
      color: white;
      text-align: center;
      padding: 10px;
      text-decoration: none;
      border:2px;
      vertical-align: -13px;}

li a:hover {animation: pulse 1s; animation-fill-mode: forwards;}
@keyframes pulse{
        0%{ border-top-style: solid; opacity: 0;  transform:translateY(5px)}
        100%{ opacity: 1; border-top-style: solid;}

<nav>
    <ul>
        <li><a href="#shopping" style="border-top-color: blue;">A</a></li>
        <li><a href="#wanted" style="border-top-color: red;">B</a></li>
        <li><a href="#games" style="border-top-color: green;">C</a></li>
        <li><a href="#TECH" style="border-top-color: brown;">D</a></li>
        <li><a href="#tourism" style="border-top-color: yellow;">E</a></li>
        <li><a href="#health" style="border-top-color: burlywood;">F</a></li>
        <li><a href="#food" style="border-top-color: cyan;">G</a></li>
        <li><a href="#fashion" style="border-top-color: magenta;">H</a></li>
        <li><a href="#culture" style="border-top-color: gray;">I</a></li>
        <li><a href="#car" style="border-top-color: firebrick;">J</a></li>
        <li><a href="#TV" style="border-top-color: olivedrab;">K</a></li>
        <li><a href="#business" style="border-top-color:silver;">L</a></li>
        <li><a href="#sport" style="border-top-color: lightblue;">M</a></li>
        <li><a href="#news" style="border-top-color: khaki;">N</a></li>
    </ul>
</nav>

</body>

Answer 1

您可以在span内放置li元素，而不是在锚标记上使用边框，并将其置于绝对位置。这样它就不会影响悬停时的锚标记。您可以根据需要调整尺寸和颜色。

示例：

  ul {
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
  background-color: #333333;
  display: block;
}

li {
  display: inline-block;
  margin: 0px auto;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position: relative;
}

li span {
  position: absolute;
  top: 0.5px;
  background: red;
  width: 100%;
  height: 2px;
  opacity: 0;
}

li a {
  display: inline-block;
  background-color: #333333;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  border: 2px;
  vertical-align: -13px;
}

li:hover span {
  animation: pulse 1s; animation-fill-mode: forwards;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: translateY(7px)
  }
  100% {
    opacity: 1;
  }

<nav>
  <ul>
    <li><span></span><a href="#shopping">A</a></li>
    <li><span></span><a href="#shopping">B</a></li>
    <li><span></span><a href="#shopping">C</a></li>
    <li><span></span><a href="#shopping">D</a></li>
    <li><span></span><a href="#shopping">E</a></li>
    <li><span></span><a href="#shopping">F</a>
    </li>
    <li><span></span><a href="#shopping">G</a></li>
    <li><span></span><a href="#shopping">H</a></li>
    <li><span></span><a href="#shopping">I</a></li>
    <li><span></span><a href="#shopping">J</a></li>
    <li><span></span><a href="#shopping">K</a></li>
    <li><span></span><a href="#shopping">L</a></li>
    <li><span></span><a href="#shopping">M</a></li>
    <li><span></span><a href="#shopping">N</a></li>
  </ul>
</nav>

</body>