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