html+css+jQuery 时间线

问题:

我需要一个类似这样样式的时间线

我改了改layui，现在功能满足了，但是layui的样式和这个不一样

我遇到的问题

1、那个竖线不知道怎么搞出来
2、那个圆点不知道怎么搞出来

我不会前端这些东西，在学。我在看了好多教程，他们都用的是css before 、after这种的，没有注释，我想二次开发也做不到。

可以给讲下css，或者给个有注释的例子也成

回答1:

css样式
<style>
/* 每一项 /
.main .item{
/ 子元素横向排布,水平垂直居中 /
display:flex;
justify-content: center;
align-items: center;
/ 字体大小 /
font-size: 20px;
}
/ 每一项左边日期 /
.main .item .item_left{
/ 文字右对齐 /
text-align: right;
/ 右边距30 /
margin-right:30px;
}
/ 每一项右边 /
.main .item .item_right{
/ 子元素横向排布,水平左对齐垂直居中 /
display: flex;
justify-content: flex-start;
align-items: center;
/ 左边框,也就是轴线了 /
border-left:solid 2px #f60;
/ 每一项的高度,可自调 /
height: 50px;
}
/ 右边中的圆和线外框 /
.main .item .item_right .circle_line{
/ 子元素横向排布,水平左对齐垂直居中 /
display: flex;
justify-content: flex-start;
align-items: center;
/ 整体前移圆球宽的一半 */
margin-left:-7.5px;

	}
	/* 圆球 */
	.main .item .item_right .circle{
		/* 宽高 */
		width:15px;
		height:15px;
		/* 圆角 */
		border-radius: 50%;
		/* 颜色 */
		background-color:#f60;
	}
	/* 圆右边横线  */
	.main .item .item_right .line{
		/* 长  */
		width:50px;
		/* 粗 */
		height:2px;
		/* 颜色 */
		background-color:#f60;
	}
	
	
</style>

以下html代码
<!-- 外层 -->
<div class="wrap">
<div class="main">
<!-- 每一事项 -->
<div class="item">
<div class="item_left">
2020-11-11
</div>
<div class="item_right">
<div class="circle_line">
<div class="circle"></div>
<div class="line"></div>
</div>
<div>吃饭</div>
</div>

		</div>
		<div class="item">
			<div class="item_left">
				2020-11-11
			</div>
			<div class="item_right">
				<div class="circle_line">
					<div class="circle"></div>
					<div class="line"></div>
				</div>
				<div>吃饭</div>
			</div>
			
		</div>
		<div class="item">
			<div class="item_left">
				2020-11-11
			</div>
			<div class="item_right">
				<div class="circle_line">
					<div class="circle"></div>
					<div class="line"></div>
				</div>
				<div>吃饭</div>
			</div>
			
		</div>
		
	</div>
	
</div>

效果图

回答2:

https://www.jianshu.com/p/c9c719821198