3. 交互时切换颜色实现加粗效果

当元素处于 :active（或 :hover）状态时，通过切换颜色来模拟字体加粗效果：

• 父元素.item的color变为black，使其内部的加粗文本可见。
• ::before伪元素的color变为transparent，使其内部的正常粗细文本隐藏。

.item:active {
  font-weight: bold; /* 保持加粗，但实际是颜色切换 */
  color: black; /* 显示父元素的加粗文本 */
}

.item:active::before {
  color: transparent; /* 隐藏伪元素的正常文本 */
}

4. 徽章的集成与样式处理

徽章（.badge）的尺寸通常是固定的，因此其大小不会因字体粗细变化而改变。我们只需要根据父元素的状态，相应地调整徽章内部文本的font-weight。

.badge {
  width: 20px;
  height: 20px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: black;
  font-weight: normal; /* 徽章初始文本正常粗细 */
}

.item:active .badge {
  font-weight: bold; /* 父元素激活时，徽章文本也加粗 */
}

完整示例代码

结合上述策略，以下是完整的HTML和CSS代码示例：

HTML 结构:

<ul class="list">
  <li class="item" title="First">First
    <div class="badge">5</div>
  </li>
  <li class="item" title="Second">Second
    <div class="badge">5</div>
  </li>
  <li class="item" title="Third">Third
    <div class="badge">5</div>
  </li>
</ul>

CSS 样式:

.list {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0; /* 移除默认列表内边距 */
  margin: 0; /* 移除默认列表外边距 */
}

.item {
  display: flex; /* 允许内部元素（文本和徽章）flex布局 */
  position: relative; /* 为伪元素定位提供参考 */
  cursor: pointer;
  font-weight: bold; /* 始终按加粗宽度计算 */
  color: transparent; /* 初始时隐藏加粗文本 */
  /* 确保文本内容在title属性中，或者调整content属性 */
}

.item::before {
  display: block;
  content: attr(title); /* 从title属性获取文本 */
  /* height: 0; 在此方案中可能不是必需的，但保留以防止意外布局 */
  color: black; /* 初始显示正常粗细的文本 */
  z-index: 1; /* 确保在父元素透明文本之上 */
  position: absolute; /* 绝对定位覆盖父元素 */
  font-weight: normal; /* 显示正常粗细 */
  /* 调整定位以精确覆盖，例如： */
  top: 0;
  left: 0;
  white-space: nowrap; /* 防止文本换行影响宽度计算 */
}

.item:active {
  color: black; /* 激活时显示父元素的加粗文本 */
}

.item:active::before {
  color: transparent; /* 激活时隐藏伪元素的正常文本 */
}

.badge {
  width: 20px;
  height: 20px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: black;
  font-weight: normal; /* 徽章初始文本正常粗细 */
  margin-left: 0.5rem; /* 徽章与文本之间的间距 */
  flex-shrink: 0; /* 防止徽章被压缩 */
}

.item:active .badge {
  font-weight: bold; /* 父元素激活时，徽章文本也加粗 */
}

关键概念与注意事项

1. position: relative 和 position: absolute: .item元素设置为position: relative，为其子元素::before伪元素的position: absolute提供定位上下文。这使得::before可以精确地覆盖在.item元素上。
2. z-index: ::before伪元素需要设置一个更高的z-index，以确保它在父元素（透明的加粗文本）之上，从而能够被用户看到。
3. color: transparent: 这是实现“预留空间但不可见”的关键。通过将文本颜色设置为透明，元素仍会占据其计算出的宽度和高度，但不会显示任何内容。
4. content: attr(title): 这种方法适用于文本内容可以从HTML元素的属性中获取的情况。如果文本内容是直接在元素内部，则需要更复杂的JS或HTML结构来处理。
5. display: flex 的兼容性: 这种方法与display: flex布局兼容，因为.item元素本身就设置为display: flex，并且其宽度已经由其内部的（透明）加粗文本确定。徽章作为.item的直接子元素，能够很好地与文本对齐。
6. 可访问性 (Accessibility): 这种基于颜色切换的方案对屏幕阅读器来说是透明的，它们会读取实际的文本内容。然而，如果过度依赖颜色来传达信息，可能会对视力障碍用户造成不便。在本例中，字体加粗是视觉反馈，不影响语义。

总结

通过巧妙地结合color: transparent、position: absolute和伪元素，我们能够有效地解决font-weight变化引起的布局抖动问题，即使在display: flex布局环境下也能保持内容的稳定性。这种方法不仅提升了用户体验，也展示了CSS在精细控制页面布局方面的强大能力。在实际应用中，可以根据具体需求调整伪元素的内容获取方式和激活状态（例如hover或focus），以适应不同的交互场景。