CSS hover文字加粗导致的元素宽度变化

记录一下，2025-03

需求

文本元素，初始时是 400 字重，鼠标移上去时变成 700 字重。

问题

由于很多字体的 400 字重和 700 字重的字符宽度不一致，鼠标移上去时 400 字重变成 700 时可能文本会抖动（即元素宽度变大了一点）。

优化实现

用透明不可见的 700 字重的文本撑开元素宽度，然后 400 字重的文本用绝对定位覆盖住元素即可。

  <style>
    .menu-item {
      position: relative;
      display: inline-block;
      padding: 4px 8px;
      cursor: pointer;
      font-weight: 400;
      text-align: center;
    }
    .menu-item>span {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    .menu-item::after {
      content: attr(data-text);
      font-weight: bold;
      visibility: hidden;
      opacity: 0;
    }
    .menu-item:hover {
      font-weight: 700;
    }
  </style>
  <ul>
    <li class="menu-item" data-text="Menu item 1">
      <span>Menu item 1</span>
    </li>
    <li class="menu-item" data-text="Menu item 2">
      <span>Menu item 2</span>
    </li>
    <li class="menu-item" data-text="Menu item 3">
      <span>Menu item 3</span>
    </li>
    <li class="menu-item" data-text="Menu item 4">
      <span>Menu item 4</span>
    </li>
  </ul>

实机运行：

• Menu item 1
• Menu item 2
• Menu item 3
• Menu item 4

• 分类： 前端开发 css
• 标签： 无标签