A CodePen by Defims.

index.html

	<ul id="timeline">
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
	</ul>
	<ul id="events">
		<li><div>event</div></li>
		<li><div>event</div></li>
		<li><div>event</div></li>
		<li><div>event</div></li>
		<li><div>event</div></li>
		<li><div>event</div></li>
	</ul>

style.css

/***lines***/
/*line _*/
#timeline>li:before{
	content:""; display: none;  position: relative; float:right; box-sizing:border-box;
	top:0;
	border-top: solid lightblue .2em; border-left-width:0 !important; border-bottom:none !important; border-right:solid lightblue .2em;
	width: 5em; height:100%;
	background: pink;
}
/*line _ dot*/
#timeline>li:after{
	content:""; display:none; position: absolute; z-index: 4000;
	left:100%; top:0;
	margin: -.25em 0 0 -.25em;
	width: .5em; height:.5em;
	border-radius: 50%;
	background:gray;
}
/*line |*/
#events>li:before {
	content: ""; display: none; position: relative; float: left;
	border:solid lightblue 0; border-width: .2em 0 0 .2em; border-right:solid 0 transparent !important;  border-bottom-color:transparent !important; 
	width: 2em; height: 100%;
}
/*line ~*/
#events>li:after{
	content:""; display: none; position: relative; float: left;
	border-top:solid .2em lightblue; border-top-color:transparent !important; border-right:none !important; border-left-width:0 !important; border-bottom: none !important;
	width: 2em; height:100%;
	background: pink; background-clip:padding-box;
}




/*line big enough*/
#timeline>li:before{	
	padding-bottom:100em; margin-bottom: -97.8em; 
	width:5em; margin-left:-5em;
}
#events>li:before,#events>li:after{	
	padding-bottom:100em; margin-bottom: -100em;
	width: 10em; margin-right:-10em; 
}
/*fixed for margin */
#timeline>li:before{
	border-bottom-width:0em !important; /*equal parent margin plus .1em for horizon float*/
}
#events>li:before{
	border-bottom-width:.5em !important; 
}




/*elements*/


#timeline{
	display:inline-block; vertical-align: top;
	margin: 0; padding:0;
	width:auto;
	list-style: none;
	counter-reset:year 1979;
}
#timeline>li{
	position: relative;
	margin:.25em 0;
	width:3em; height:2em;
	text-align: center; line-height: 2em; color:white;
	background:pink;
}
#timeline>li>a{
	display: inline-block;	position: absolute; z-index:9999;
	left:0; right: 0;
	margin:auto;
	padding:0;
	width:100%; height:100%;
	background: hsla(0,0%,60%,1);
	text-align: center; color:black;
}
#timeline>li>a:before{
	counter-increment:year;
	content:counter(year) ;
}
#events{
	display: inline-block; position: relative; vertical-align: top; 
	margin:0 0 0 10em; padding:0;
	width: 10em;
	list-style: none;
}
#events>li{
	margin:.5em 0;
	0margin-right:-9999em; /*use for float not change line*/
	width:auto; height:3em;
	0background: lightblue;
}
#events>li>div{
	display: inline-block;	position: absolute; z-index:3000;
	left:0;
	padding:0 .5em;
	width:100%; height:3em;
	background: hsla(0,0%,60%,1);
	text-align: left; color:black;
}




/*user difined*/


/*link style*/
#events>li:before,#events>li:after,#timeline>li:before{
	border-color:rgba(0,0,0,.5); /*link color*/
	border-width:.1em; /*link weight*/
	border-style:dotted;
}
/*event link vertical position*/
#events>li:before,#events>li:after{
	top: 1em;
}
/*timeline link vertical position*/
#timeline>li:before,#timeline>li:after{
	top: 50%;
}
/*link horizon spacing*/
#timeline>li:before{
	margin-right: .25em;
}
#events>li:before{
	margin-left: .25em;
}
/*link horizon position*/
#timeline>li:before{
	right:-4em;
}
#events>li:before,#events>li:after{
	left:-4em;
}

/*events horizon position*/
#events{
	margin-left: 5em;
}
/*line base circle*/
#timeline>li:after{
	top:50%;
	margin-top: -.25em;
	width:.4em; height:.4em;
	background: rgba(0,0,0,.5);
}
/*background color*/
#timeline>li:before,#events>li:after{
	background-color: white;
}


/*bind*/
#events>li:nth-child(1):before{ display: block;	z-index:0; }
#events>li:nth-child(1):after,
#timeline>li:nth-child(1)>*,
#timeline>li:nth-child(1):before,
#timeline>li:nth-child(1):after{ display: block; z-index: 1; }

#events>li:nth-child(2):before{ display: block;	z-index:1; }
#events>li:nth-child(2):after,
#timeline>li:nth-child(2)>*,
#timeline>li:nth-child(2):before,
#timeline>li:nth-child(2):after{ display: block; z-index: 2; }

#events>li:nth-child(3):before{ display: block;	z-index:2; }
#events>li:nth-child(3):after,
#timeline>li:nth-child(3)>*,
#timeline>li:nth-child(3):before,
#timeline>li:nth-child(3):after{ display: block; z-index: 3; }

#events>li:nth-child(4):before{ display: block;	z-index:3; }
#events>li:nth-child(4):after,
#timeline>li:nth-child(10)>*,
#timeline>li:nth-child(10):before,
#timeline>li:nth-child(10):after{ display: block; z-index: 4; }

#events>li:nth-child(5):before{ display: block;	z-index:4; }
#events>li:nth-child(5):after,
#timeline>li:nth-child(15)>*,
#timeline>li:nth-child(15):before,
#timeline>li:nth-child(15):after{ display: block; z-index: 5; }

#events>li:nth-child(6):before{ display: block;	z-index:5; }
#events>li:nth-child(6):after,
#timeline>li:nth-child(16)>*,
#timeline>li:nth-child(16):before,
#timeline>li:nth-child(16):after{ display: block; z-index: 6; }
/**/