使用::before和::after伪元素可纯CSS实现提示气泡。先设置目标元素为relative定位，再用::after通过border生成三角箭头，如top:100%配合border-top-color创建向下指向的三角；用::before设置content显示提示文本，通过opacity和visibility控制默认隐藏，并在:hover时显示，结合transition实现淡入效果，最终完成无需额外HTML标签、美观实用的提示框。
在CSS初级项目中，使用 ::before 和 ::after 伪元素制作提示气泡是一个常见且实用的技巧。它不需要额外的HTML标签，仅靠CSS就能实现美观的提示效果。
基本结构与定位
要创建提示气泡，先给目标元素设置相对定位，这样伪元素才能相对于它进行定位。
示例：.tooltip {
position: relative;
display: inline-block;
padding: 8px;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
使用 ::after 创建气泡尖角
通常提示框下方或旁边的小三角由 ::after 实现，利用边框（border）模拟三角形。
代码示例：.tooltip::after {
content: "";
position: absolute;
top: 100%; /* 放在元素下方 */
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top-color: #007bff; /* 三角朝上 */
}
- content 属性必须设置，即使为空字符串
- 通过调整 border 的方向和颜色控制三角指向
- margin-left 负值用于水平居中三角
使用 ::before 显示提示文字（可选）
如果不想用HTML的 title 或 data 属性配合JS，也可以用 ::before 直接显示文本。
立即学习“前端免费学习笔记（深入）”；
示例：.tooltip::before {
content: "这是提示内容";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 6px 10px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
}
- 默认隐藏，配合 hover 显示
- white-space: nowrap 防止换行
- transition 实现淡入效果
再添加 hover 状态让提示出现：
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
基本上就这些。掌握定位、content 和边框三角技巧后，可以灵活做出上下左右各种方向的提示气泡，适合新手练手又实用。
