見やすい脚注にする

css-footnote.png

HTML側での脚注の構造

脚注が必要な難しい用語
<sup id="fnref:1">
<a href="#fn:1" rel="footnote">1</a>
</sup>
<div class="footnotes">
<hr>
<ol>
<li id="fn:1">
<p>脚注ですよー<a href="#fnref:1" rev="footnote">もとの文章に戻る↩</a></p>
</li>
</ol>
</div>

脚注に狙ったCSS

a[rel="footnote"] {
    border-bottom: none;
    background-color: #fff9c7;
    line-height: 0;
}
a[rel="footnote"]:before {
    content: "{";
}
 
a[rel="footnote"]:after {
    content: "}";
}
a[rev="footnote"] {
    border-bottom: none;
}
Bibliography

サポートサイト Wikidot.com