如何在自定义时间线的Bullet元素内添加内层圆点？

方案一：新增HTML元素控制内层圆点 #

直接在每个.bullet容器里加一个<span>作为内层圆点，再通过CSS调整样式。

修改后的HTML代码 #

<ul class="timeline" id="timeline">
    <li class="li complete">
      <div class="timestamp">
        <span>Expire:</span>
        <span>Hours: </span>
      </div>
      <div class="bullet">
        <span class="inner-dot"></span>
        <h5>Awarded Time</h5>
      </div>
    </li>
    <li class="li complete">
      <div class="timestamp">
        <span>Expire:</span>
        <span>Hours:  </span>
      </div>
      <div class="bullet">
        <span class="inner-dot"></span>
        <h5>Advance Time</h5>
      </div>
    </li>
    <li class="li complete">
      <div class="timestamp">
        <span>Available Time: </span>
        <span>&nbsp;</span>
      </div>
      <div class="bullet">
        <span class="inner-dot"></span>
        <h5>Total</h5>
      </div>
    </li>
</ul>

配套CSS样式 #

/* 保留你原有的.bullet基础样式，补充必要布局 */
.bullet {
  position: relative;
  /* 示例基础样式，可根据你原代码调整 */
  width: 50px;
  height: 50px;
  border: 2px solid #333;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 内层圆点样式 */
.inner-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #333; /* 颜色可按需修改 */
  margin-bottom: 4px; /* 控制圆点和下方文字的间距 */
}

方案二：CSS伪元素实现（无需修改HTML） #

如果不想改动现有HTML结构，用:before伪元素生成内层圆点更高效。

CSS样式代码 #

/* 保留原.bullet样式，补充定位 */
.bullet {
  position: relative;
  /* 示例基础样式，可根据你原代码调整 */
  width: 50px;
  height: 50px;
  border: 2px solid #333;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 用伪元素生成内层圆点 */
.bullet:before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #333;
  margin-bottom: 4px;
}

注意事项 #

• 两种方案效果一致：方案一适合需要给内层圆点加交互（比如点击事件）的场景；方案二更简洁，适合静态展示。
• 可通过调整width/height改变圆点大小，background-color修改颜色，margin-bottom调整和文字的间距，按需适配即可。

内容的提问来源于stack exchange，提问作者Jesus