target与before实现锚点高亮效果

本篇文章向大家介绍《:target与::before制作锚点高亮效果》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

: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 在短暂高亮后移除样式

基本上就这些。不复杂但容易忽略细节——确保目标元素支持 :target，并且伪元素的 content 不为空。

今天关于《target与before实现锚点高亮效果》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！