CSS为.nav-link::before加:not排除首链接时动画失效如何解决

问题原因 #

你使用的:first-of-type选择器的匹配规则是同父级下相同标签类型的第一个元素，你所有的a.nav-link都分别包裹在独立的<li>标签中，每个<li>下只有一个<a>标签，所以每一个a.nav-link都是自己父级下的第一个a元素，a.nav-link:not(:first-of-type)无法匹配到任何元素，导致所有导航的::before伪元素都没有被创建，动画自然全部失效。

解决方法 #

你可以基于同级的<li>元素做排除判断，因为所有<li>都是同一个<ul>下的兄弟元素，:first-child可以正确匹配到第一个<li>，修改对应选择器即可：

a, a.nav-link{
    text-decoration: none;
    color: #594922;
}
a.nav-link:hover{
    color: #4dd897 
}
/* 只给非第一个li下的导航链接创建伪元素 */
ul li:not(:first-child) a.nav-link::before{
    content: '';
    height: 1px;
    background: #594922;
    display: block;
    transform: scale(0, 1);
    transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}
/* 悬停选择器也要对应限制范围，避免规则冲突 */
ul li:not(:first-child) a.nav-link:hover::before {
  transform-origin: right top;
  transform: scale(1, 1)
}

如果页面有多个<ul>不想全局影响，也可以给当前导航的<ul>加自定义类比如class="nav-list"，把选择器改成.nav-list li:not(:first-child) a.nav-link::before即可，兼容性和可维护性更好。

可选方案 #

如果你的导航结构后续可能调整，也可以直接给首个导航链接单独加类名来排除，规则更加灵活：

<ul>
  <li>
    <a class="nav-link no-hover">abcde</a>
  </li>
  <li>
    <a class="nav-link">b</a>
  </li>
  <li>
    <a class="nav-link">c</a>
  </li>
</ul>

对应的CSS选择器修改为：

a.nav-link:not(.no-hover)::before{
  /* 原有样式不变 */
}
a.nav-link:not(.no-hover):hover::before{
  /* 原有样式不变 */
}

内容的提问来源于stack exchange，提问作者yih613