html - 如何将伪元素（之前）与所选元素水平对齐

Question

我无法将::beforeCSS 伪元素与所选元素对齐。被选元素和伪元素都是文本。有时它会对齐，但如果浏览器破坏了所选元素，它将无法正确对齐。贝娄是我的代码：

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>

预期的：

实际的：

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

标签： htmlcss

Answer 1

绕过它的一种方法，但相当hacky，是在之后而不是之前制作伪元素。这似乎让浏览器意识到它不应该溢出文本，而是从下一行开始，就像它拥有的元素一样。

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

（注意：我添加了更多文本，以便显示问题）。

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）上测试