使用::after伪元素添加提示文本需设置content属性，仅对非替换元素生效；行内元素建议设display:inline-block；可结合attr()动态取值，悬停显示需配合opacity/visibility过渡；伪元素不占DOM、不可绑定事件。
用 ::after 伪元素给元素后面添加提示文本，核心是设置 content 属性，并确保目标元素支持伪元素（通常是块级或行内块级元素）。
确保元素能显示 ::after 内容
例如给表单标签加「必填」标识： CSS： 立即学习“前端免费学习笔记（深入）”； 注意： 结合 这样就能实现悬停显示提示气泡，内容来自 HTML 属性，便于维护和多语言支持。::after 默认只对 设置了 content 属性且非替换元素 生效。常见问题：、::after；、display 值：
span）默认支持，但若内容为空或被压缩，可能不显示 —— 建议显式设 display: inline-block 或 inline 并保证有内容流位置overflow: hidden 或高度限制过严，可能裁掉伪元素，需检查布局上下文基础写法：添加纯文本提示
.required::after {
content: "（必填）";
color: #f5222d;
margin-left: 4px;
font-size: 12px;
}
content 的值必须是字符串（用引号包裹）、attr() 函数或 counter()，不能直接写未加引号的中文。进阶技巧：图标 + 文本 / 动态属性值
attr() 可读取 HTML 属性动态生成提示：button[data-tip]::after {
content: attr(data-tip);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 8px;
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
button[data-tip]:hover::after {
opacity: 1;
visibility: visible;
}
注意事项与避坑点
::after 是伪元素，不占 DOM，无法绑定事件、不能被 JS 获取（getComputedStyle 可读样式但不能操作）。其他要点：
display: none 元素上使用 —— 伪元素也会被隐藏content 中可用 \A 换行符，并配合 white-space: pre
content: "ⓘ"）或字体图标（如 content: "\e900"），需确保字体加载正常::after，但只认单冒号写法 :after；现代项目推荐双冒号以示语义清晰
