CSS:target+::before实现页面提示效果

想要提升网站用户体验？试试CSS `:target` 伪类结合 `::before` 伪元素，轻松实现页面锚点跳转提示效果！本文详解如何利用 `:target` 选中URL片段标识符对应的元素，并通过 `::before` 插入提示内容，例如“? 您正在查看这里”，为用户提供清晰的视觉反馈。通过简单的CSS代码，即可在单页应用或FAQ页面中，高亮显示用户当前浏览的位置，增强定位体验。文章还分享了实用技巧和注意事项，包括布局影响、可访问性以及旧版IE兼容性问题，助你打造更友好的网站交互。快来学习，让你的网站更具吸引力！

:target 是 CSS 伪类，用于选中 URL 片段标识符对应的元素。结合 ::before 可在锚点跳转时插入提示内容，如“? 您正在查看这里”，通过高亮样式提供视觉反馈。示例中，.highlight:target::before 添加醒目提示块，增强单页或 FAQ 页面的定位体验。需注意布局影响、可访问性及旧版 IE 不兼容问题。

使用 :target 伪类结合 ::before 伪元素，可以实现一种简单的页面提示效果，特别适用于锚点跳转时的视觉反馈。比如当用户点击某个链接跳转到页面特定区域时，通过高亮或显示提示文字提醒当前定位的位置。

:target 是什么？

:target 是一个 CSS 伪类，用于匹配当前 URL 中片段标识符（即 # 后面的部分）所指向的元素。例如，URL 为 page.html#section1 时，ID 为 section1 的元素就会被 :target 选中。

::before 配合显示提示

利用 ::before 伪元素，可以在目标元素前插入内容，比如“您已到达此处”之类的提示信息，增强用户体验。

示例代码：

.highlight:target::before {
  content: "? 您正在查看这里";
  display: block;
  background-color: #ffeb3b;
  padding: 8px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
  border-radius: 4px;
}

HTML 结构示例：

<h2 id="section1" class="highlight">第一部分</h2>
<p>这里是第一部分内容...</p>
<p><a href="#section1">跳转到第一部分</a></p>

当用户点击链接跳转至 #section1 时，:target 生效，::before 插入提示语，并以醒目样式展示。

实用场景与注意事项

这种技巧适合帮助用户确认跳转位置，尤其在单页文档或 FAQ 页面中非常有用。

• 确保插入的内容不影响原有布局，建议使用 display: block 或 position 控制位置
• 可配合过渡动画提升体验，如淡入效果
• 注意屏幕阅读器等辅助工具对伪元素内容的支持有限，关键信息不应只依赖伪元素呈现
• 旧版 IE 不支持 :target，需考虑兼容性需求

基本上就这些，不复杂但容易忽略细节。

到这里，我们也就讲完了《CSS:target+::before实现页面提示效果》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！