javascript - 在 HTML/CSS 中的常规内联文本上放置一行和文本

Question

我有一段常规段落形式的文本，我想用脚注进行注释，我希望清楚脚注正在评论的段落中的确切文本，所以我想要一行（如果可能，带有端点/箭头/等）在文本上，脚注编号在中心，如下所示：

   <--- 1--->                       <------ 2 ------>
   Hi, here's some text to annotate, isn't it so cool?

如果可能的话，我很感激有关如何使用 HTML/CSS/JS 执行此操作的任何指示。

Answer 1

这是您可以做到的一种方法：

.annotation {
  border-top: dashed 2px black;
  position: relative;
}
.annotation::after {
  content: attr(data-footnote);
  position: absolute;
  left: 50%;
  top: -1.15em;
}

<p><span data-footnote="1" class="annotation">Hi, here's</span> text to annotate, <span data-footnote="2" class="annotation">isn't it so cool?</span>
</p>

（<span>或者它可能是<a href>脚注本身的链接）包裹文本。通过穿上position: relative它，这允许子伪元素相对于它进行绝对定位。

然后边框和定位负责破折号和数字。虽然箭头会更难......也许它们可以用背景图像来完成，但我没有做到。

您需要确保line-height段落中的 足够大，这样上面的数字就不会与其他文本行重叠。