使用CSS伪元素::before和::after可为元素添加提示图标或文字，无需额外HTML标签。1. ::before和::after通过content属性在元素前后插入内容，常用于添加装饰性图标或提示信息；2. 必须设置content属性，否则伪元素不显示；3. 利用::before可创建圆形问号图标，样式由CSS控制，保持HTML语义清晰；4. 使用::after结合:hover可实现悬停显示提示框，需配合position定位；5. 可引入字体图标如Font Awesome，通过Unicode字符显示专业图标，提升视觉效果。该方法简洁高效，是前端常用技巧。
在网页开发中，经常需要为某些元素添加提示图标（如问号、感叹号等），而无需额外的HTML标签。这时可以利用CSS伪元素 ::before 和 ::after 结合 content 属性来实现干净、语义清晰的效果。
::before 与 ::after 是什么？
CSS 伪元素允许你在元素的内容前或内容后插入装饰性内容。它们不会出现在HTML中，只通过CSS控制，非常适合用于添加图标、引号、装饰符号等。
常用语法：
.element::before {
content: "";
}
.element::after {
content: "";
}
content 是必须设置的属性，即使为空字符串，否则伪元素不会显示。
立即学习“前端免费学习笔记（深入）”；
用 ::before 添加提示图标
假设我们想在一个帮助文本前加一个“？”图标作为提示，可以通过以下方式实现：
.help-tip::before {
content: "?";
display: inline-block;
width: 18px;
height: 18px;
background-color: #007BFF;
color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-right: 8px;
font-size: 12px;
font-weight: bold;
}
HTML：
这是帮助信息效果：在文字前出现一个蓝色圆形问号图标，样式完全由CSS控制，不污染HTML结构。
用 ::after 显示提示文字或箭头
除了图标，也可以用 ::after 实现鼠标悬停时显示提示框或小箭头。
例如：当用户悬停在图标上时，显示说明文字：
.tooltip::after {
content: "点击可编辑此项";
position: absolute;
visibility: hidden;
opacity: 0;
background-color: #333;
color: #fff;
padding: 6px 10px;
font-size: 14px;
border-radius: 4px;
white-space: nowrap;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 6px;
}
.tooltip:hover::after {
visibility: visible;
opacity: 1;
}
注意：position: absolute 需要父元素设置 position: relative 才能准确定位。
使用字体图标代替文字内容
如果想使用更美观的图标（如Font Awesome），可以用Unicode字符或自定义字体：
.icon-info::before {
content: "\f059"; /* Font Awesome 的 info 图标编码 */
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #007BFF;
margin-right: 6px;
}
确保页面已引入对应字体库，即可显示专业图标。
基本上就这些。通过 ::before 和 ::after 配合 content，既能保持HTML简洁，又能灵活添加视觉提示，是前端开发中非常实用的技巧。关键点是记得设置 content，控制 display 和定位，并合理使用字体或背景样式美化图标。不复杂但容易忽略细节。
