如何将伪元素(之前)与所选元素水平对齐

Question

我在将::before CSS伪元素与所选元素对齐时遇到问题。所选元素和伪元素都是文本。有时它会对齐，但如果浏览器破坏了所选元素，它将不会正确对齐。下面是我的代码：

​

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

span {
  border-bottom: solid 16px;
}

span::before {
  position: absolute;
  content: attr(data-label);
  font-size: 14px;
}

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

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

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

.level-1::before {
  margin-top: 16px;
}

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

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

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

<p>
Lorem <span class="level-1" data-uid="003" data-label="Level1">ipsum dolor <span class="level-2" data-uid="001" data-label="Level2">sit amet, <span class="level-3" data-uid="002" data-label="Level3">consectetuer adipiscing</span> elit.</span></span>
</p>

​

期望值：

​

​

实际：

​

​

为什么会发生这种情况，如何解决？

Answer 1

一种绕过它的方法是在之后而不是之前生成伪元素。这似乎让浏览器意识到它不应该溢出文本，而是从下一行开始，就像它自己的元素一样。

此外，通过设置跨度的位置并调整生成的垂直对齐，使伪元素相对于其跨度定位。

(注意:我添加了更多的文本，以便显示问题)。

​

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

span {
  border-bottom: solid 16px;
}

span::after {
  position: absolute;
  content: attr(data-label);
  font-size: 14px;
  left: 0;
  top: -32px;
}

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

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

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

.level-1::after {
  margin-top: 16px;
}

.level-2::after {
  margin-top: 32px;
}

.level-3::after {
  margin-top: 48px;
}

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

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

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

span {
  position: relative;
}

<p>
  Lorem <span class="level-1" data-uid="003" data-label="Level1">ipsum dolor <span class="level-2" data-uid="001" data-label="Level2">sit amet, more text <span class="level-3" data-uid="002" data-label="Level3">consectetuer adipiscing</span> elit.</span>
  </span>
</p>

​

在Windows10 (Edge/Chrome和Firefox)和IOS 14.7.1 (Safari)上测试