CSSでアニメーション化するときにコンテンツを除外する

Question

私はリストアイテムをアニメーション化するために一部を取得しようとしています（上の境界線をアニメートしています）。それに続いて、内部のコンテンツもアニメートします。私は、そのアニメーションをどのように排除しない（PS：間違った用語について申し訳ありませんが、私はコーディングに新たなんだ）？

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>