添加:before伪元素后居中内容偏移，如何优雅修复数字居中无需魔法数值

问题根源：你添加的:before伪元素默认属于.digit的内部内容流，使用相对定位偏移后仍会占据原有空间，挤压了数字的显示位置，导致数字在橙色背景内偏移。

解决方案（无魔法数值，适配任意字体/尺寸） #

核心思路是让千位分隔符脱离.digit的内部内容流，不占用数字的显示空间，修改后的CSS如下：

.container {
  background: #ededed;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 
.number {
  display: flex;
  flex-direction: row;
}

/* 修改分隔符规则 */
.digit:nth-last-of-type(3n):before {
  content: ",";
  position: absolute;
  /* 定位到当前数字块的左外侧间隙中间，仅0.15em为视觉微调值，不影响布局逻辑 */
  right: calc(100% + 0.15em);
  color: black;
  font-weight: bold;
 }
 
 .digit:nth-last-of-type(3n) {
  background: orange;
  }
 
 .digit {
  /* 新增相对定位作为分隔符的定位上下文 */
  position: relative;
  width: 1em;
  text-align: center;
  padding: 0.25em;
  margin: 0.5em;
  border-radius: 0.1em;
  background: white;
  color: black;
 }

修改后千位分隔符会自动显示在两个数字块的中间位置，不会占用橙色数字块的内部空间，数字会自然居中，同时支持任意字体大小、数字长度的场景。

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