如何为导航标题与购物车设置不同的hover效果？

你遇到的问题根源在于HTML的ID属性不能包含空格，且一个元素只能设置唯一ID，你写的id="menu-links title"是无效写法，浏览器只会识别第一个ID值，导致样式无法正确匹配。正确的做法是用类来实现样式复用和元素区分：

修正后的HTML代码 #

<ul class="nav-menu">
  <li class="nav-item"><a href="#" class="nav-link-main menu-links title">Начало</a></li>
  <li class="nav-item"><a href="#" class="nav-link-main menu-links title">Lórèal Professionel</a></li>
  <li class="nav-item"><a href="#" class="nav-link-main menu-links title">Стайлинг</a></li>
  <li class="nav-item"><a href="#" class="nav-link-main menu-links title">Steam Pod</a></li>
  <li class="nav-item"><a href="#" class="nav-link-main menu-links cart"><svg
                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-cart" viewBox="0 0 16 16">
                                <path
                                    d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                            </svg></a></li>
</ul>

修正后的CSS代码 #

.menu-links {
  position: relative;
  color: white;
  font-size: 17px;
}

.menu-links.title:after {
  color: white;
  display: flex;
  content: '';
  border-bottom: solid 3px violet;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
  transform-origin: 100% 50%
}

.menu-links.title:hover:after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.menu-links.cart:hover {
  color: violet;
}

修改说明 #

1. 将原有的多ID写法替换为类：用.menu-links定义所有导航项的通用样式，.title和.cart分别标记标题项和购物车项，实现样式区分
2. 保持了你原本想要的hover效果逻辑：标题项hover时显示从右到左展开的下划线，购物车项hover时颜色变为紫罗兰色

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