:target是CSS伪类，用于匹配URL片段指向的元素。当用户点击锚点链接跳转时，可通过h2:target::before插入图标并高亮背景，如content: "✦ "; background-color: #fffacd，提升视觉反馈，适用于文档页、FAQ等场景，建议配合transition动画与SVG图标优化体验，确保目标元素有唯一id且content不为空。
当用户点击页面内的锚点链接跳转到指定位置时，可以通过 :target 伪类配合 ::before 伪元素，在目标元素前添加装饰图标或实现高亮效果，提升用户体验和视觉反馈。
:target 是什么？
:target 是一个CSS伪类，用于匹配当前URL片段（即#后面的部分）所指向的页面元素。比如访问 page.html#section1，那么 id="section1" 的元素就会被 :target 选中。
使用 ::before 添加装饰图标
在目标元素的前面插入一个小图标（如对勾、箭头或星标），可以直观地告诉用户“你已到达此处”。这通过 ::before 实现：
- 为需要高亮的标题或区块设置唯一 id
- 使用 a[href^="#"] 创建锚点链接
- 利用 :target::before 插入图标或符号
- 可配合背景色、边框等增强视觉提示
h2:target::before {
content: "✦ ";
color: #ff6b6b;
font-size: 1.2em;
margin-right: 8px;
}
h2:target {
background-color: #fffacd;
padding-left: 10px;
border-left: 3px solid #ffcc5c;
}
实际应用场景
这种技巧特别适合文档页、帮助中心、FAQ 页面或长文目录导航。用户点击“常见问题”中的某一条目后，对应标题不仅滚动到位，还自动显示图标与底色变化，避免找错位置。
立即学习“前端免费学习笔记（深入）”；
还可进一步优化体验：
- 添加 transition 动画让背景色渐显
- 用 SVG 图标代替字符获得更好清晰度
- 结合 JS 在短暂高亮后移除样式
