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

Placing a Line and Text over Regular Inline Text in HTML/CSS

本文关键字：文本 常规内 HTML CSS      更新时间：2023-09-26

我有一个常规段落形式的文本正文，我想用脚注进行注释，并且我希望清楚脚注正在评论的段落中的确切文本，所以我想在文本上放一行(如果可能的话，带有端点/箭头/等(，脚注编号在中间， 这样：

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

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

这里有一种方法可以做到这一点：

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

相关文章：