CSS3实现左上角或右上角显示提醒圆点的示例代码

下面是CSS3实现左上角或右上角显示提醒圆点的示例代码的完整攻略。

下面是CSS3实现左上角或右上角显示提醒圆点的示例代码的完整攻略。

1. 使用绝对定位和伪元素

简单来说，在需要显示提醒圆点的元素的父元素中添加一个定位框，并使用绝对定位，再在定位框中使用伪元素来实现圆点的效果。

示例代码如下：

<div class="notification-wrapper">
  <span class="notification"></span>
  <p>需要显示提醒圆点的内容</p>
</div>

.notification-wrapper {
  position: relative; /* 父元素添加定位 */
}

.notification {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red; /* 伪元素绘制圆点 */
}

说明：

• 这里使用了绝对定位来绝对定位伪元素。同时，将父元素设为 relative，这是为了让子元素在父元素内使用绝对定位。
• 伪元素使用宽和高相等、圆角相等的圆形，设置为圆点的形状。
• top 和 right 的值为 -5px，是为了使圆点和容器距离略微缩小，增加美观性。

2. 使用 ::after 伪元素

在需要显示提醒圆点的元素中，使用伪元素 ::after 来实现圆点的效果。

示例代码如下：

<span class="notification">需要显示提醒圆点的内容</span>

.notification::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border-radius: 50%;
  background-color: #F00;
}

说明：

• 在使用伪元素的时候，先设置 content 的值为 ""，让伪元素有效。
• 然后使用 inline-block 使伪元素行内显示，可以占据文本内容的空间。
• 再设定宽高和圆角让其成为圆形。
• 再通过 margin-left 来设置圆点与文本内容之间的间隔。

以上就是两种简单易懂的实现左上角或右上角显示提醒圆点的示例代码攻略了，希望能够帮到你。