html - 使用 html 和 css 中间带有文本的垂直线

Question

我想这样创作

我可以像下面那样做

如何从开头删除多余的行

我无法发布 css 和 html 代码，给出了一些错误，所以发布代码截图

Answer 1

我在 JSFiddle 上为你做了这个，我希望这是你正在寻找的。

.timeline {
	position: relative;
	width: 30px;
	margin: 0 auto;
	overflow: hidden;
}
.timeline::after {
	content: '';
	position: absolute;
	width: 4px;
	background-color: #ccc;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.word {
	width: 100%;
	font: bold 12px arial, sans-serif;
	color: blue;
	position: relative;
	display: block;
	background: #fff;
	overflow: hidden;
	z-index: 999;
	clear: both;
	margin: 0 auto 30px auto;
	padding: 5px 0;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

<div class="timeline">
	<div class="word">2016</div>
	<div class="word">2014</div>
	<div class="word">2013</div>
	<div class="word">2012</div>
	<div class="word">2010</div>
</div>