如何阻止导航栏链接hover时移位且保留加粗效果？

当鼠标悬停在导航栏菜单项上时，该菜单项及其他菜单项的文本会发生移位——悬停项变宽，其他项变窄。调整margin和padding后仍未解决，请问如何在保留hover加粗效果的前提下，阻止导航栏链接文本在鼠标悬停时发生移位？

代码示例 #

CSS #

.profile-header-section {
    width: 100%;
    background-color: black;
    height: 5rem;
}

.profile-nav {
    width: 80%;
    height: 5rem;
    margin: 0 auto;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-logo {
    letter-spacing: 0.5rem;
    font-weight: 900;
    font-size: larger;
}

.profile-links {
    display: flex;
    width: 20rem;
    height: 5rem;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
}

.profile-links li > a {
    text-decoration: none;
    color: white;
}

.profile-links li > a:hover {
    color: #d6c211;
    background-image: -webkit-linear-gradient(0deg, #d6c211 0%, #ffc107 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: underline;
    font-weight: 700;
}

HTML #

<div class="container">
  <section class="profile-header-section">
    <header class="profile-header">
      <nav class="profile-nav">
        <div class="profile-logo">Profile</div>
        <ul class="profile-links">
          <li><a href="#">Home</a></li>
          <li><a href="#">Resume</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </nav>
    </header>
  </section>
</div>

解决方案 #

移位的核心原因是：字体加粗后元素实际宽度增加，触发flex布局重新分配空间，导致其他项被挤压变窄。以下两种方法可解决问题，同时保留hover效果：

方法一：给菜单项设置固定宽度 #

让每个导航链接占据固定宽度，hover加粗时不会改变元素尺寸，从而避免布局移位：

.profile-links li > a {
    text-decoration: none;
    color: white;
    /* 新增样式 */
    display: inline-block;
    width: 4.5rem; /* 根据文本长度调整，确保能容纳加粗后的内容 */
    text-align: center;
}

方法二：让菜单项均分容器宽度 #

利用flex布局的均分特性，给每个列表项分配均等宽度，hover时即使内容变宽，也不会影响整体布局：

.profile-links {
    display: flex;
    width: 20rem;
    height: 5rem;
    /* 替换justify-content，改为让子元素均分 */
    /* justify-content: space-between; */
    align-items: center;
    list-style-type: none;
}

.profile-links li {
    /* 新增：让每个li均分宽度 */
    flex: 1;
    text-align: center;
}

.profile-links li > a {
    text-decoration: none;
    color: white;
    /* 新增：让链接占满li的宽度 */
    display: block;
}

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