CSS技巧：在不移动内容的情况下实现字体加粗与徽章共存

本文探讨了在web开发中，如何通过css技巧在不引起内容位移的情况下，实现点击元素时字体加粗效果，并同时优雅地集成一个徽章。核心策略是利用`color: transparent`和`::before`伪元素进行内容层的分离与切换，确保元素在不同状态下始终占据相同的空间，从而避免布局抖动。

背景问题：字体加粗引发的布局抖动

在前端开发中，当用户与页面元素交互（例如点击或悬停）时，我们常希望通过改变字体粗细来提供视觉反馈。然而，font-weight属性的改变会导致文本占据的宽度发生变化，进而可能引起周围内容的位移，即“布局抖动”（layout shift），这会严重影响用户体验。

一种常见的CSS技巧是利用伪元素（如::after）预先计算加粗文本的宽度。具体做法是：将::after伪元素设置为display: block，content属性设置为与原始文本相同，并应用font-weight: bold，但将其opacity设为0或height设为0，使其不可见。这样，父元素会根据这个不可见的加粗文本来计算其宽度，从而在实际文本加粗时避免位移。

然而，当我们需要在同一元素内部集成其他组件，例如一个徽章（badge），并希望使用display: flex布局来对齐文本和徽章时，上述::after伪元素的技巧可能会失效。将父元素设置为display: flex会改变其内部元素的布局上下文，导致::after伪元素不再能有效地“撑开”父元素的宽度，从而重新引入布局抖动问题。

解决方案：基于颜色切换和伪元素层叠

为了在display: flex环境下，既能实现字体加粗不位移，又能与徽章和谐共存，我们可以采用一种基于颜色切换和伪元素层叠的策略。该方法的核心思想是：让元素始终保持其加粗状态的宽度，并通过颜色透明度来控制显示哪种字体粗细。

立即学习“前端免费学习笔记（深入）”；

1. 确保元素始终占据加粗宽度

首先，将父元素（例如.item）的font-weight始终设置为bold，并将其color初始设置为transparent。这意味着该元素在渲染时，其宽度会根据加粗的文本来计算，但用户此时看不到任何文本。

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

2. 使用::before伪元素显示正常粗细文本

接着，利用::before伪元素来显示正常粗细的文本。这个伪元素的内容应与父元素的文本内容相同（可以通过content: attr(title)或直接在HTML中放置文本并用CSS隐藏父元素文本实现），并将其font-weight设置为normal。通过position: absolute将其定位到父元素上方，并设置z-index确保其可见性。

.item::before {
  display: block; /* 确保伪元素占据一行 */
  content: attr(title); /* 或者根据实际文本内容设置 */
  height: 0; /* 这里的height:0 可能是为了兼容旧的方案，但在此新方案中，由于position:absolute，其高度通常由内容决定 */
  color: black; /* 初始显示正常粗细的文本 */
  z-index: 1; /* 确保在父元素透明文本之上 */
  position: absolute; /* 绝对定位覆盖父元素 */
  font-weight: normal; /* 显示正常粗细 */
}

注意： 原始问题中的content: attr(title)适用于文本内容存储在title属性中的情况。如果文本直接在<li>标签内，则需要调整HTML结构或使用JavaScript来动态设置::before的content，或者更简单地，直接在HTML中放置两份文本，一份用于正常显示，一份用于加粗显示，并通过CSS控制它们的可见性。此处沿用attr(title)的思路。

Sider

多功能AI浏览器助手，帮助用户进行聊天、写作、阅读、翻译等

3159

查看详情

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），以适应不同的交互场景。

以上就是CSS技巧：在不移动内容的情况下实现字体加粗与徽章共存的详细内容，更多请关注php中文网其它相关文章！