CSS伪类:target与::before结合制作锚点高亮_使用:target ::before显示装饰图标-css教程-PHP中文网

CSS伪类:target与::before结合制作锚点高亮_使用:target ::before显示装饰图标

P粉602998670

发布： 2025-11-28 20:39:35

原创

218人浏览过

:target是CSS伪类，用于匹配URL片段指向的元素。当用户点击锚点链接跳转时，可通过h2:target::before插入图标并高亮背景，如content: "✦ "; background-color: #fffacd，提升视觉反馈，适用于文档页、FAQ等场景，建议配合transition动画与SVG图标优化体验，确保目标元素有唯一id且content不为空。

css伪类:target与::before结合制作锚点高亮_使用:target ::before显示装饰图标

当用户点击页面内的锚点链接跳转到指定位置时，可以通过 :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;
}

登录后复制