插入脚注把脚注标注删掉_CSS中的经典版式效果：脚注

插入脚注把脚注标注删掉

Footnotes are one of the few pieces of typography that the web would appear to have neglected: there is an argument to be made that hyperlinks have made footnotes irrelevant. However, there will always be a role for removing sections of explanatory text that may distract the flow of reading.

脚注是网络上似乎被忽略的少数印刷术之一：有一种论据认为， 超链接使脚注变得无关紧要。 但是，始终会删除一些可能会分散阅读内容的解释性文字。

<ol id="footnotes">
	<li id="footnote1">
		<cite>Capuchin Monkeys and their Kin in Film</cite>, Miriam Krebs, 1997
	<li id="footnote2">
		<cite>Y: The Last Man</cite>,  Brian K. Vaughan, Pia Guerra, 2002 - 2008
</ol>

In the main body text, we want a number that links to the position of this footnote:

在主体文本中，我们想要一个链接到此脚注位置的数字：

<p>Capuchin monkeys have had starring roles 
in many films, including <cite>Raiders of the Lost Ark</cite> and 
<cite>Night At The Museum</cite>
<a href="#footnote1" rel="footnote"><sup>1</sup></a>. They’ve appeared 
in graphic novels, such as “Ampersand” in Y: The Last Man</cite>
<a href="#footnote2" rel="footnote"><sup>2</sup></a>.</p>

We use <sup> to raise the “1” above the baseline and reduce its size. <sup> is superscript; <sub> is subscript. We have also added the (relatively rarely used) rel attribute with a value of footnote to show that the relationship of the link to its target is that of a footnote. (You may recall that we used the rel attribute previously when creating a link to an external stylesheet.)

我们使用<sup>将“ 1”提高到基线以上并减小其大小。 <sup>是上标； <sub>是下标。 我们还添加了(相对很少使用的) rel属性，其footnote的值表明链接与其目标的关系就是footnote的关系。 (您可能还记得我们在创建到外部样式表的链接时使用过rel属性。)

This is a good solution, but there’s a problem. Adding new footnotes to the bottom of a page is not a big issue; the ordered list will rearrange itself accordingly, even if the new item was added in the middle of the list. But if we add a footnote into the body text, we would have to re-number footnotes that appear after it, as the footnote numbers in the body are hardcoded. In other words, if we wanted to add a footnote after “graphic novel” in the body copy, that would become footnote 2. We would then have to increment, by hand, all the footnotes that appeared in the body copy after that point.

这是一个很好的解决方案，但是有一个问题。 在页面底部添加新的脚注不是什么大问题； 即使将新项目添加到列表的中间，已排序列表也会相应地重新排列。 但是，如果我们在正文中添加脚注，则由于正文中的脚注编号是硬编码的，因此必须重新编号在其后出现的脚注。 换句话说，如果我们想在正文中的“图形小说”之后添加一个脚注，则该脚注将变为脚注2。然后，我们必须手动增加此点之后正文中出现的所有脚注。

There’s a better way, if you’re prepared to use a little CSS2. Write the footnotes as a list, as before. In your body copy, write links as before, but because there could be many possible links in your body copy, give them a class of “foot”. Also, leave the content of the links blank:

如果您准备使用一点CSS2，那么还有更好的方法。 像以前一样，将脚注写为列表。 在您的正文中，像以前一样编写链接，但是由于您的正文中可能有许多可能的链接，因此请给它们一个“脚”类。 另外，将链接的内容留空：

<p>Capuchin monkeys have had starring roles in many films, 
including <cite>Raiders of the Lost Ark</cite> and <cite>Night At The Museum</cite>
<a href="#footnotes" class="foot"></a>.

Then, we want to automatically count the number of times links with a class of “foot” appear in the body, and automatically add this to be the content of the link. We also want to style this content:

然后，我们要自动计算具有“脚”类的链接出现在体内的次数，并自动将其添加为链接的内容。 我们还想样式化此内容：

body {
	counter-reset: footnotecounter;
	/* Create a footnote counter scope */
}
a.foot {
	text-decoration: none;
	outline: none;
}
a.foot:before {
	font-size: smaller;
	margin-left: .5em;
	vertical-align: super;
		/* sets the footnote above the baseline */
	content: counter(footnotecounter);
	counter-increment: footnotecounter;
	/* Add 1 to footnote */
}

That approach certainly improves things, but there still is a problem. Moving your eyes to the bottom of a printed page to read a footnote is no bother, even if the footnotes were printed as endnotes. But a web page is different, especially if has a lot of body content. Scrolling back and forth to read footnotes in a web page would be frustrating.

这种方法当然可以改善情况，但是仍然存在问题。 即使将脚注打印为尾注，也无需费心将眼睛移至打印页面的底部以阅读脚注。 但是网页是不同的，特别是如果正文内容很多。 来回滚动以阅读网页中的脚注会令人沮丧。

A better approach, one that suits the web paradigm, is to re-position the footnotes as “side notes”. This means removing our original list from the bottom of the page and placing the content of the footnotes inline, inside of the paragraphs, in <span> tags. We’ll also set the footnote hyperlinks to null links:

一种更适合Web范式的方法是将脚注重新定位为“边注”。 这意味着从页面底部删除我们的原始列表，并将脚注的内容内嵌在段落中的<span>标记中。 我们还将脚注超链接设置为空链接：

<p>Capuchin monkeys have had starring roles in many films, 
including <cite>Raiders of the Lost Ark</cite> and <cite>Night At The Museum</cite> 
<a href="#" class="foot"></a><span><cite>Capuchin Monkeys and their 
Kin in Film</cite>, Miriam Krebs, 1997</span>.

<span> is an element that you use when you’ve run out of other elements. It’s an inline tag, one that surrounds content that has no other possible context.

<span>是在其他元素用尽时使用的元素。 这是一个内联标签，其中包含没有其他可能上下文的内容。

More CSS is added:

添加了更多CSS：

p {
	margin-right: 16em;
}
span {
	visibility: hidden;
	position: fixed;
	width: 12em;
	border: 1px solid #000;
	background: #dd0;
	padding: 1em;
	top: 1em;
	right: 1em;
}
a.footnote:focus + span {
	visibility: visible;
}

We’ve given our paragraphs enough room on the right for the new position of our footnotes/sidenotes, and hidden the notes themselves using the same trick we used for our simple gallery. The difference is we’ve set position: fixed, so that the side note always appears in the same location.

我们在段落的右侧留出了足够的空间来放置脚注/边注的新位置，并使用与用于简单图库的相同技巧来隐藏注解本身。 区别在于我们已将position: fixed设置为position: fixed ，因此，旁注始终出现在同一位置。

In the near future, these solutions are likely to appear a little different once browsers begin to support the footnote and asterisk counting systems for list-style-type that are proposed for CSS, and I will update this entry once that occurs.

在不久的将来，一旦浏览器开始支持为CSS提议的列表样式类型的脚注和星号计数系统，这些解决方案可能会出现一些不同，一旦出现，我将对其进行更新。

翻译自: https://thenewcode.com/69/Classic-Typography-Effects-in-CSS-Footnotes

插入脚注把脚注标注删掉