: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 结构示例：
ecshop仿万表网商城整站
该软件是以ecshop作为核心的仿制万表网的商场网站源码。万表网模板 2015最新版整体简洁大气，功能实用，是一款时尚典雅的综合类模板！样式精美的商品分类树，层次分明，分类结构一目了然。首页轮播主广告分别对应切换小广告，商品宣传更到位。独家特色增加顶级频道页面、品牌页面，以及仿京东对比功能，提升网站档次，让您的网站更加高端大气！并且全站采用div+css布局，兼容性良好，更注重页面细节，增加多种j
0 查看详情
第一部分
这里是第一部分内容...
当用户点击链接跳转至
#section1
时，
:target
生效，
::before
插入提示语，并以醒目样式展示。
实用场景与注意事项
这种技巧适合帮助用户确认跳转位置，尤其在单页文档或 FAQ 页面中非常有用。
确保插入的内容不影响原有布局，建议使用
display: block
或
position
控制位置可配合过渡动画提升体验，如淡入效果注意屏幕阅读器等辅助工具对伪元素内容的支持有限，关键信息不应只依赖伪元素呈现旧版 IE 不支持 :target，需考虑兼容性需求
基本上就这些，不复杂但容易忽略细节。
以上就是css伪类:target + ::before制作页面提示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1067879.html
微信扫一扫 
支付宝扫一扫 
