创建一个与垂直线相连的圆，并在每个圆的右侧显示文本

Question

我正在创建一个与线相连的圆圈，并在右侧显示文字。 我尝试了以下代码如果我删除了display: block表单类.info-timeline ul li span.timeline-circle，则文本显示在右侧，但圆圈无法正常显示。

你能帮助我吗？

我需要这样的输出

＆＃13;

＆＃13;

.info-timeline ul{list-style: none;margin: 0;padding: 0;}
.info-timeline ul li{margin: 10px;}
.info-timeline ul li span.timeline-circle{
   position: relative;
	border: 2px solid #999;
	border-radius: 100%; 
	width: 50px;
	line-height: 50px;
	text-align: center;
	margin-top: 50px;
	background-color: #fff;
	z-index: 2;
	display: block;
}
.info-timeline ul li span.timeline-circle:before {
	position: absolute; 
	border: 1px solid #999;
	width: 0; 
	height: 50px; 
	display: block;
	content: ''; 
	left: 50%; 
	z-index: 1; 
	top: -54px; 
	margin-left: -1px;
	}
.info-timeline ul li:first-child {margin-top: 0;}
.info-timeline ul li:first-child:before {display: none;}

.info-timeline ul li a{color: #000;}

＆＃13;

 <div class="info-timeline">
		<ul>
			<li><span class="timeline-circle">1</span><a href="#">example 1</a></li>
			<li><span class="timeline-circle">2</span><a href="#">example 2</a></li>
			<li><span class="timeline-circle">3</span><a href="#">example 3</a></li>
			<li><span class="timeline-circle">4</span><a href="#">example 4</a></li>
		</ul>
	</div>

＆＃13;

＆＃13;

＆＃13;