网页文本hover时仅变色不向上位移的CSS问题求助

我在搭建练习网站时遇到一个CSS交互问题——设置hover样式后，文本颜色能正常变化，但transform: translateY(-5px)的向上位移效果完全没反应。试过看教程、问朋友，甚至用ChatGPT排查，都没解决。

原代码 #

CSS：

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: rgb(70, 66, 66);
  font-weight: bold;
  transition: all 0.3s ease;
}

a:hover {
  color: #007994;
  transform: translateY(-5px);
}

header ul li {
  display: inline-block;
  margin: 20px;
}

header {
  background: white;
  position: sticky;
  top: 0;
  padding: 0 85px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  box-shadow: 0 5px 80px rgba(0, 0, 0, 0.1);
}

.header__links {
  display: flex;
  align-items: center;
}

HTML：

<header>
  <nav class="header__links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>

曾尝试的无效代码 #

a{
    text-decoration: none;
    color: rgb(70, 66, 66);
    font-weight: bold;
    transition: all 0.3s ease;
}

a:not(.header__logo a):hover{
    color: #007994;
    transform: translateY(-5px);
}

解决方案 #

核心问题是<a>标签默认是行内元素，CSS的transform属性仅对块级元素、行内块元素或定位元素生效，行内元素无法应用该变换。只需给<a>标签添加display: inline-block即可解决：

a {
  text-decoration: none;
  color: rgb(70, 66, 66);
  font-weight: bold;
  transition: all 0.3s ease;
  display: inline-block; /* 新增此行 */
}

a:hover {
  color: #007994;
  transform: translateY(-5px);
}

display: inline-block既保留了行内元素同行排列的特性，又赋予了它块级元素的属性，这样transform就能正常触发位移效果了。

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