如何对齐绝对定位 HTML 元素的基线

Question

我正在尝试使用 CSS 在 HTML 段落的边距内编写一个短标签，其方式与 HTML 列表项的标记方式类似。我认为这样做的方法是使标签成为一个绝对定位的内联块，该块在边距内移动（请参见下面的 HTML+CSS 代码）。这按我的预期工作，只是我找不到将标签文本的基线与相应段落的第一行对齐的方法。

\n

HTML+CSS 代码：

\n

\r\n

\r\n

.labeled {\n  margin-left: 40px;\n  position: relative;\n}\n\n.labeled::before {\n  display: inline-block;\n  content: attr(data-label);\n  position: absolute;\n  width: 40px;\n  left: -40px;\n  /* How to vertically position so paragraph and label have same baseline? */\n}

\r\n

<p class="labeled" data-label="L">Lorem ipsum<sup>SUPERSCRIPT</sup> dolor sit amet, consectetur adipiscing elit. Ut cursus sem in nisl pulvinar porta. Praesent laoreet nisl sit amet sagittis mollis. Aliquam sit amet erat vitae enim ullamcorper dapibus ut vel lectus. Maecenas facilisis\n  accumsan diam ut maximus. Suspendisse potenti. Donec sapien sem, lacinia eu eros vitae, tincidunt congue leo.\n</p>

\r\n

\r\n

\r\n

\n

JSFiddle 中的相同代码

\n

问题是标签与顶部段落的第一行垂直对齐，而不是像我希望的那样在基线上对齐：

\n

\n

上图中的两个 \xe2\x80\x98L\xe2\x80\x99 如果不是上标使第一行更高，那么它们会垂直对齐。

\n

如何实现相同的结果但垂直对齐正确？（我愿意以不同的方式做事，并且我愿意假设标签永远不会总是适合边距的一行；我也同意标签在边距内右对齐左对齐，如果这有任何帮助的话。另一方面，我不想使用任何类型的 JavaScript，并且我想避免丑陋的 hack。我的要求是否太多了？）

\n

Answer 1

摆脱position:absolute并使用负边距

.labeled {
  margin-left: 40px;
  position: relative;
}

.labeled::before {
  display: inline-block;
  content: attr(data-label);
  width: 40px;
  margin-left:-40px;
}

<p class="labeled" data-label="L">Lorem ipsum<sup>SUPERSCRIPT</sup> dolor sit amet, consectetur adipiscing elit. Ut cursus sem in nisl pulvinar porta. Praesent laoreet nisl sit amet sagittis mollis. Aliquam sit amet erat vitae enim ullamcorper dapibus ut vel lectus. Maecenas facilisis
  accumsan diam ut maximus. Suspendisse potenti. Donec sapien sem, lacinia eu eros vitae, tincidunt congue leo.
</p>