.title-container::before { content: ''; position: absolute; top: 0; left: 0; width: 22px; height: 1px; background-color: #015972; } .title-container::after { content: ''; position: absolute; top: -7px; left: 22px; width: 15px; height: 15px; border-radius: 50%; background-color: #00cbff; }

这是一个使用 CSS 伪元素实现标题带有小圆点的样式代码。代码解释如下：

.title-container::before {
  content: '';                     // 伪元素内容为空
  position: absolute;              // 绝对定位
  top: 0;                          // 在顶部
  left: 0;                         // 在左侧
  width: 22px;                     // 宽度为 22 像素
  height: 1px;                     // 高度为 1 像素
  background-color: #015972;       // 背景色为深蓝色
}

.title-container::after {
  content: '';                     // 伪元素内容为空
  position: absolute;              // 绝对定位
  top: -7px;                       // 向上偏移 7 像素
  left: 22px;                      // 向右偏移 22 像素
  width: 15px;                     // 宽度为 15 像素
  height: 15px;                    // 高度为 15 像素
  border-radius: 50%;              // 圆角半径为 50%
  background-color: #00cbff;       // 背景色为浅蓝色
}

在上面的代码中，我们使用了两个伪元素，分别对应标题的小圆点和小圆圈。在 ::before 伪元素中，我们设置了宽度为 22 像素、高度为 1 像素的矩形，并将其背景色设置为深蓝色。在 ::after 伪元素中，我们设置了宽度为 15 像素、高度为 15 像素的圆形，并将其背景色设置为浅蓝色，并使用 border-radius 属性将其设置为圆形。最后，我们将 ::before 伪元素定位在标题的左侧，将 ::after 伪元素定位在标题的上方偏移一定距离和右侧偏移一定距离。这样就实现了标题带有小圆点和小圆圈的样式。