为wordpress文章列表添加时间轴效果

先来看效果：

以下是实现效果思路：

首先给时间前面添加伪元素，使得时间前面出现带绿色圆心的圆：

/*文章列表时间前的伪元素css*/.wp-block-post-date {  
  position: relative;  
  display: inline-block;  
  padding-left: 0px; /* 根据需要调整，为圆点和外圈留出空间 */  
  vertical-align: middle; /* 如果需要与其他行内元素对齐 */  
}  
  
.wp-block-post-date::before  {  
  content: "";  
  position: absolute;  
  left: -30px;  
  top: 46%;  
  transform: translateY(-50%); /* 垂直居中 */  
  border-radius: 50%;  
}  
.wp-block-post-date::after {  
  content: "";  
  position: absolute;  
  left:-34px;  
  top: 46%;  
  transform: translateY(-50%); /* 垂直居中 */  
  border-radius: 50%;  
}  
  
.wp-block-post-date::before {  
  /* 内部绿色圆点 */  
  width: 8px;  
  height: 8px;  
  background-color: green;  
  z-index: 2; /* 确保绿点显示在灰色圆圈之上 */  
}  
  
.wp-block-post-date::after {  
  /* 外部灰色圆圈 */  
  width: 16px; /* 灰色圆圈的直径 */  
  height: 16px;  
  border: 3px solid #ccc; /* 灰色圆圈的边框颜色和宽度 */  
  background-color: transparent; /* 透明背景，只显示边框 */  
}

再次，在文章列表前加上竖线的伪元素：代码如下

/*文章列表前竖线css*/li.wp-block-post {
  position: relative;
  padding-left: 10px; /* 为竖线留出空间 */
}
li.wp-block-post::before {
  content: "";
  position: absolute;
  left:-17px;
  top: 21px;
  bottom: -10px;
  width: 2px; /* 竖线的宽度 */
  background-color: #E6E6FA; /* 竖线的颜色 */
}

根据自己的主题，微调元素的位置就可以了。