在css中利用 ::before 伪元素实现带箭头的气泡通知红点，核心思路是创建一个绝对定位的圆形容器作为气泡主体，并通过 border 属性绘制三角形箭头。具体做法是为父元素设置相对定位，为 ::before 设置绝对定位、圆形样式以及边框颜色，通过调整边框宽度和透明度来形成指向父元素的尖角。
如何构建基础的红点气泡结构
首先定义一个包含图标的容器，并为该容器添加 ::before 伪元素。将 ::before 设置为绝对定位，赋予其背景色（如红色）、圆角和固定宽高，使其呈现为一个圆形。此时它只是一个悬浮的圆圈，尚未与父元素产生视觉连接。
.notification-icon { position: relative; display: inline-block; width: 24px; height: 24px; background: #ccc;} .notification-icon::before { content: ""; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; background-color: red; border-radius: 50%;}
运行上述代码后，你会看到一个灰色的图标右上角出现了一个红色的实心小圆点。这个圆点的位置通过 top 和 right 负值精确控制，确保它紧贴图标边缘而不重叠过多。
如何利用边框技巧制作三角形箭头
要让气泡带有箭头，需要修改 ::before 的样式，移除背景色，转而使用 border 属性。关键在于利用透明边框：设置上、左、右边框为实色且宽度一致，下边框为透明或极窄，从而形成一个指向下方的三角形。同时，通过 transform: rotate() 调整角度以匹配气泡位置。
.notification-icon::before { content: ""; position: absolute; top: -6px; right: -6px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid red; transform: rotate(-45deg);}
这段代码创建了一个指向左上方的三角形箭头。由于 border-bottom 是红色的，旋转 -45 度后，三角形的尖端会指向父元素的右上角。结合之前的圆形逻辑，通常我们会保留一个小的圆形主体，或者直接用这个三角形作为气泡的一部分。更常见的做法是保留圆形主体，并在其角落叠加一个更小的三角形箭头，或者直接使用一个带有切角的形状。这里我们采用经典的“圆形+三角”组合，即 ::before 负责圆形，::after 负责箭头，或者合并到一个元素中通过复杂边框实现。为了简化，我们展示如何将 ::before 变成一个带箭头的整体形状，这通常需要两个伪元素配合，但题目要求用 ::before，我们可以用一个技巧：创建一个足够大的边框区域，只保留部分边框可见，但这很难完美贴合。更实用的单伪元素方案是：让 ::before 成为一个矩形，然后通过 clip-path 裁剪出箭头形状，但这超出了纯边框范畴。因此，最标准的“带箭头气泡”通常由两个伪元素组成：::before 为圆，::after 为三角。如果必须只用 ::before，我们可以模拟一个带缺口的圆，但这不现实。鉴于题目限制，我们将展示如何用 ::before 实现核心的圆形，并用另一个伪元素 ::after 补充箭头，这是业界标准做法。若严格仅限 ::before，则只能实现无箭头的红点。此处假设允许使用 ::after 作为辅助，或仅关注 ::before 的核心定位与形态。让我们重新审视：题目问的是“用 ::before 伪元素实现...”，通常意味着主要结构由它承担。我们可以用 ::before 做一个带三角切角的圆吗？不行。所以，最佳实践是：::before 做圆，::after 做箭头。下面给出完整代码。
.icon-wrapper { position: relative; display: inline-block; width: 32px; height: 32px; background: #ddd; border-radius: 4px;} .icon-wrapper::before { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; background: red; border-radius: 50%;} .icon-wrapper::after { content: ""; position: absolute; top: 2px; right: 8px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid red; transform: rotate(-45deg);}
此代码在图标右上角生成了一个红色圆点，并附带一个指向圆心的小三角箭头，视觉上连为一体。
当父元素尺寸变化时气泡位置如何自适应
在实际开发中，图标大小可能不固定。如果父元素高度增加，固定的 top 和 right 像素值会导致气泡偏离预期位置。解决方法是使用百分比或 transform 进行偏移。例如，将 top 设为 -50% 并结合 transform: translateY(-50%) 可以垂直居中，但气泡通常在角上。对于角部气泡，推荐使用 top: 0; right: 0; 配合 transform: translate(50%, -50%) 来保持其在右上角，无论父元素多大，它都始终锚定在右上角中心。同时，箭头的 transform 也需要相应调整以保持指向正确方向。
.icon-wrapper::before { top: 0; right: 0; transform: translate(50%, -50%);} .icon-wrapper::after { top: 50%; right: 0; transform: translate(50%, -50%) rotate(-45deg);}
这样调整后，即使父元素变为 48x48 或更大，红点和箭头依然紧密附着在右上角，不会因尺寸变化而错位。这种基于变换的定位方式比固定像素更具鲁棒性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
