使用::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 实现，利用边框（border）模拟三角形。
代码示例：.tooltip::after {
content: "";
position: absolute;
top: 100%; /* 放在元素下方 */
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top-color: #007bff; /* 三角朝上 */
}
如果不想用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 状态让提示出现：
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
基本上就这些。掌握定位、content 和边框三角技巧后，可以灵活做出上下左右各种方向的提示气泡，适合新手练手又实用。
以上就是如何在CSS初级项目中制作提示气泡_::before::after伪元素显示提示的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
625
收藏
