使用 ::before 伪元素结合 content 可实现无额外标签的提示效果，如通过 a[target="_blank"]::before 添加新窗口箭头提示，或利用 content: attr(data-tip) 动态读取 data-tip 属性值生成气泡提示，再配合 ::after 制作小三角增强视觉，使提示更简洁美观。
使用 CSS 的 ::before 伪元素结合 content 属性，可以不借助额外 HTML 标签实现简洁的提示效果。这种方式常用于添加图标、标注状态或展示提示信息。
基本语法与作用
::before 在元素内容前插入生成的内容，必须配合 content 使用。content 可以是文字、符号、引用属性值等。
常见写法：- content: "提示："; —— 插入静态文本
- content: attr(data-tip); —— 引用自定义属性值
- content: "★"; —— 插入特殊符号或图标
制作文字提示标签
例如为链接添加“新窗口打开”的提示：
a[target="_blank"]::before {
content: "↗ ";
color: #007acc;
font-size: 0.9em;
}
所有带有 target="_blank" 的链接前会自动出现一个箭头，提示用户将在新标签页打开。
立即学习“前端免费学习笔记（深入）”；
结合 data 属性动态显示提示
利用 HTML 的 data- 属性传递提示内容，更灵活实用。
HTML 示例：
<a href="#" data-tip="官方文档">文档链接</a>
CSS 实现：
a[data-tip]::before {
content: attr(data-tip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
}
<p>a[data-tip]:hover::before {
opacity: 1;
}</p>鼠标悬停时显示气泡提示，内容来自 data-tip，无需额外标签。
添加小三角或图标增强视觉
可在提示框上加一个小箭头，提升用户体验。
a[data-tip]::after {
content: "";
border-width: 4px;
border-style: solid;
border-color: #333 transparent transparent transparent;
position: absolute;
top: 100%;
left: 10px;
}
通过 ::after 创建小三角，与 ::before 提示框配合，形成完整提示气泡样式。
基本上就这些，合理使用 ::before 和 content 能让提示更轻量、结构更干净。
