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足够大，以便上面的数字与其他文字行不重叠。

将行和文本放在HTML / CSS中的常规内联文本上

1 个答案: