点击元素加粗字体不位移，添加相邻徽章后失效如何解决？

要同时实现点击元素字体加粗不位移和徽章与元素通过Flex相邻排列，核心是调整原有占位技巧以适配Flex布局逻辑。

问题根源 #

你之前采用的inline-block+伪元素占位方案，是利用inline-block的宽度计算特性，让隐藏的加粗文本预先占据宽度；但将.item改为display:flex后，伪元素的display:block会在Flex容器内占据独立空间，破坏了原本的宽度预计算逻辑，导致点击时内容位移。

解决方案 #

调整伪元素样式，使其在Flex容器中仍能正确预占宽度：

• 将伪元素的display改为inline-block，与Flex子项的文本保持一致的布局特性
• 保留visibility: hidden和height: 0，确保伪元素不占据垂直空间
• 维持.item的display:flex，保证文本与徽章的灵活排列

修正后的完整代码 #

.list{
  display: flex;
  gap: 2rem;
  list-style: none;
}

.item{
 display: flex;
 align-items: center; /* 让文本与徽章垂直居中对齐 */
 position: relative;
 cursor: pointer;
}

.item:after{
  display: inline-block; /* 关键：适配Flex布局的核心修改 */
  content: attr(title);
  opacity: 0;
  visibility: hidden;
  font-weight: bold;
  height: 0;
  white-space: nowrap; /* 防止文本换行，确保宽度计算准确 */
}

.item:active{
  font-weight: bold;
 }
  
.badge {
  width: 20px;
  height: 20px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 0.5rem; /* 给徽章与文本添加间距，优化视觉 */
}

<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>

原理说明 #

• 伪元素改为inline-block后，在Flex容器内会与文本内容保持相同的宽度计算逻辑，预先生成加粗状态的文本宽度，点击时仅切换字体粗细，不会改变容器总宽度
• white-space: nowrap确保伪元素内的文本不换行，避免宽度计算偏差
• align-items: center让文本与徽章垂直居中，提升整体视觉协调性

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