CSS垂直时间轴圆点对齐竖线问题：为何圆点不显示？

问题描述 #

需要实现垂直时间轴效果，现有代码中通过.xyz::before创建的蓝色圆点未显示，且无法对齐左侧红色竖线。原代码如下：

原CSS代码 #

.timeline-main-container {
  border-left: 5px solid red;
  margin-left: 50px;
}

.xyz::before {
  content: "";
  border-radius: 50%;
  height: 10px;
  width: 10px;
  background-color: blue;

}

.xyz {
  margin-left: 50px;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="timeline-main-container">
    <div class="timeline-first-container xyz">
      <h1>Master in Computer Engineering</h1>
      <p>Harvard University</p>
      <time>2015-2017</time>
    </div>
    <div class="timeline-second-container xyz">
      <h1>Bachelor in Computer Engineering</h1>
      <p>University of California</p>
      <time>2014-2015</time>
    </div>
    <div class="timeline-third-container xyz">
      <h1>Computer Science</h1>
      <p>International University</p>
      <time>2013-2014</time>
    </div>
  </div>
</body>

</html>

问题原因 #

• ::before伪元素默认是inline元素，设置width和height不会生效，导致圆点无法显示
• 未设置定位规则，无法将圆点精准定位到红色竖线位置

修复方案 #

修改后的CSS代码如下：

.timeline-main-container {
  border-left: 5px solid red;
  margin-left: 50px;
  padding-left: 0; /* 确保内容区域紧贴红色边框右侧 */
}

.xyz {
  margin-left: 50px;
  position: relative; /* 为伪元素提供绝对定位的基准容器 */
  margin-bottom: 25px; /* 增加时间轴项间距，提升可读性 */
}

.xyz::before {
  content: "";
  border-radius: 50%;
  height: 10px;
  width: 10px;
  background-color: blue;
  display: block; /* 切换为块级元素，让宽高设置生效 */
  position: absolute; /* 开启绝对定位 */
  left: -55px; /* 向左偏移：.xyz的左外边距(50px) + 红色边框宽度(5px) */
  top: 12px; /* 垂直对齐标题，可根据实际内容调整数值 */
}

关键修改说明 #

1. 给.xyz添加position: relative，让伪元素能基于该容器进行定位
2. 给.xyz::before设置display: block，使宽高属性生效，显示出蓝色圆点
3. 通过position: absolute和left: -55px，将圆点精准对齐到左侧红色竖线位置
4. 调整top值让圆点与标题垂直居中，添加margin-bottom优化时间轴的视觉间距

修改后即可实现蓝色圆点显示并对齐红色竖线的垂直时间轴效果。

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