-2

脚注で注釈を付けたい通常の段落形式のテキストの本文があり、脚注がコメントしている段落の正確なテキストを明確にしたいので、行が欲しい(可能であれば、端点/矢印/その他を使用して) テキストの上に、中央に脚注番号を配置します。次のようにします。

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

可能であれば、HTML / CSS / JSでこれを行う方法についての指針をいただければ幸いです。

4

1 に答える 1

1

これを行う方法の 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上記の数字が他のテキスト行と重ならないように、段落内の が十分な大きさであることを確認してください。

于 2013-10-10T02:48:43.767 に答える