在网页开发中，脚注通常用于对正文内容里的特定术语、引用来源或补充说明信息进行标注，很多人会疑惑是否可以通过CSS直接添加脚注。实际上CSS本身不具备创建脚注内容的能力，但可以结合HTML的基础结构，利用CSS的伪元素、计数器、content属性等特性，实现脚注的标记、自动编号和样式定位，完成脚注的完整展示效果。
实现CSS脚注的核心原理
CSS添加脚注的本质是：先通过HTML定义正文中的脚注标记位置和脚注内容的容器，再使用CSS的counter属性实现脚注编号的自动递增，通过::before或::after伪元素将编号插入到对应位置，最后通过定位或布局属性将脚注内容展示在页面的合适位置。
基础HTML结构搭建
首先需要搭建合理的HTML结构，分为正文脚注标记和脚注内容区域两部分，示例结构如下：
<!-- 正文内容区域 -->
<div class="article-content">
<p>这是一段包含需要补充说明的内容<span class="footnote-ref">补充说明</span>，这里是对内容的额外解释。</p>
<p>另一段内容中也有需要标注的部分<span class="footnote-ref">引用来源</span>，用于标注信息出处。</p>
</div>
<!-- 脚注内容区域 -->
<div class="footnote-list">
<div class="footnote-item">这是第一条补充说明的具体内容，用于解释正文中的相关术语。</div>
<div class="footnote-item">这是第二条引用来源的说明，标注内容的出处信息。</div>
</div>
CSS样式实现步骤
1. 定义计数器初始化
首先需要在正文容器上初始化脚注计数器，确保编号从1开始递增：
/* 初始化脚注计数器 */
.article-content {
counter-reset: footnote-counter;
}
2. 为正文脚注标记添加编号
使用::after伪元素和counter函数，为正文中的每个脚注标记添加自动递增的编号：
/* 脚注标记样式，添加上标编号 */
.footnote-ref {
position: relative;
font-size: 0.8em;
vertical-align: super;
color: #0066cc;
cursor: pointer;
}
/* 插入自动递增的脚注编号 */
.footnote-ref::after {
counter-increment: footnote-counter;
content: "[" counter(footnote-counter) "]";
margin-left: 2px;
}
3. 为脚注内容添加对应编号
同样使用计数器，为脚注内容区域的每个条目添加对应的编号，保证和正文标记一一对应：
/* 脚注列表容器样式 */
.footnote-list {
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid #e0e0e0;
font-size: 0.9em;
color: #666;
}
/* 脚注条目样式，添加对应编号 */
.footnote-item {
position: relative;
padding-left: 30px;
margin-bottom: 10px;
counter-increment: footnote-counter-list;
}
.footnote-item::before {
content: "[" counter(footnote-counter-list) "]";
position: absolute;
left: 0;
color: #0066cc;
}
4. 初始化脚注内容计数器
为了避免两个计数器互相干扰，需要单独为脚注列表初始化计数器：
/* 初始化脚注内容计数器 */
.footnote-list {
counter-reset: footnote-counter-list;
}
完整示例代码
将HTML和CSS结合后的完整可运行示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS脚注实现示例</title>
<style>
/* 初始化正文脚注计数器 */
.article-content {
counter-reset: footnote-counter;
line-height: 1.8;
padding: 20px;
}
/* 脚注标记样式 */
.footnote-ref {
position: relative;
font-size: 0.8em;
vertical-align: super;
color: #0066cc;
cursor: pointer;
}
/* 正文脚注编号 */
.footnote-ref::after {
counter-increment: footnote-counter;
content: "[" counter(footnote-counter) "]";
margin-left: 2px;
}
/* 脚注列表容器 */
.footnote-list {
counter-reset: footnote-counter-list;
margin-top: 30px;
padding: 15px 20px 0;
border-top: 1px solid #e0e0e0;
font-size: 0.9em;
color: #666;
}
/* 脚注条目样式 */
.footnote-item {
position: relative;
padding-left: 30px;
margin-bottom: 10px;
}
/* 脚注内容编号 */
.footnote-item::before {
content: "[" counter(footnote-counter-list) "]";
position: absolute;
left: 0;
color: #0066cc;
counter-increment: footnote-counter-list;
}
</style>
</head>
<body>
<div class="article-content">
<p>这是一段包含需要补充说明的内容<span class="footnote-ref">补充说明</span>，这里是对内容的额外解释。</p>
<p>另一段内容中也有需要标注的部分<span class="footnote-ref">引用来源</span>，用于标注信息出处。</p>
<p>第三段内容也有补充需求<span class="footnote-ref">额外说明</span>，用于补充更多细节信息。</p>
</div>
<div class="footnote-list">
<div class="footnote-item">这是第一条补充说明的具体内容，用于解释正文中的相关术语。</div>
<div class="footnote-item">这是第二条引用来源的说明，标注内容的出处信息。</div>
<div class="footnote-item">这是第三条额外说明的内容，补充更多相关的细节信息。</div>
</div>
</body>
</html>
注意事项
- HTML结构中脚注标记和脚注条目的数量必须一致，否则会出现编号不对应的问题。
- 如果页面中有多个独立的正文区域需要添加脚注，需要为每个区域单独初始化计数器，避免编号混乱。
- 可以通过修改
content属性的内容，自定义脚注编号的格式，比如将方括号改为圆括号，或者添加其他前缀后缀。 - 如果需要实现点击正文脚注标记跳转到对应脚注内容的效果，可以结合
id和锚点链接实现，这部分属于HTML的功能，不需要额外CSS支持。