如何解决CSS ::before伪元素与选中元素断行时水平对齐错位问题

问题产生原因 #

1. 未给span元素设置position: relative，导致::before伪元素的绝对定位没有以当前span作为参考容器，而是向上查找最近的非static定位的祖先元素，位置参考基准错误。
2. 行内元素<span>发生断行时，用margin-top控制伪元素垂直位置的方式，没有和当前span的实际渲染位置绑定，断行后span的行盒位置发生变化，伪元素的偏移量就会出现错位。
3. 行内元素的边框、内边距默认在断行时会按每一行独立渲染，如果没有做特殊配置，也会导致下划线的位置和伪元素标签的对齐逻辑失效。

解决方案 #

直接修改CSS代码即可，修改后的完整代码如下：

p {
  width: 300px;
  line-height: 5em;
}

span {
  position: relative; /* 作为伪元素的定位参考容器 */
  border-bottom: solid 16px;
  box-decoration-break: clone; /* 保证断行时每一行的边框样式统一 */
}

span::before {
  position: absolute;
  content: attr(data-label);
  font-size: 14px;
  left: 0; /* 对齐当前span的左边缘 */
}

.level-1 {
  padding-bottom: 0px;
}

.level-2 {
  padding-bottom: 16px;
}

.level-3 {
  padding-bottom: 32px;
}

.level-1::before {
  top: 16px; /* 替换原来的margin-top，用top相对于父span定位 */
}

.level-2::before {
  top: 32px;
}

.level-3::before {
  top: 48px;
}

span[data-uid="001"] { border-color: #F9CC88; }
span[data-uid="002"] { border-color: #FEB396; }
span[data-uid="003"] { border-color: #AED4D5; }

如果不需要支持span内容断行，想要整个选中范围的下划线连为整体，可以额外给span设置display: inline-block即可。

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