垂直线与css中的分支

我试图绘制一条垂直线,该线的左右两侧有多个分支.之后我使用了pseudo类div但是当右侧文本出现箭头定位时出现问题.是否有其他方法可以编写此类.任何人都可以建议我如何编写这个类？

任何帮助赞赏. 寻找灵感来看看这个演示

.at-timeline .timeline--details {
  position: relative;
}
.at-timeline .timeline--single {
    display: flex;
    flex-direction: row;
}
.at-timeline .timeline--details,
.at-timeline .time--date {
    flex-basis: 14%;
    padding: 15px 50px;
}
.text-right { text-align: right;}
.at-timeline .timeline--details:before {
  content: "";
  position: absolute;
  width: 35px;
  height: 2px;
  top: 17%;
  right: 0;
  background: #2783e8;
}
.at-timeline:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 300%;
  top: 15%;
  left: 24%;
  background: #2783e8;
}

	

		

			
Title
			
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.
		
		
			01
			January
			2017
		
	
	

		
			01
			January
			2017
		
		

			
Title
			
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.
		
	
	

		

			
Title
			
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.
		
		
			01
			January
			2017