垂直线与css中的分支

Question

我试图绘制一条垂直线,该线的左右两侧有多个分支.之后我使用了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;
}

<div class="timeline at-timeline" style="padding: 100px;">
	<div class="timeline--single">
		<div class="timeline--details text-right">
			<h4 class="timeline--title">Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
		<span class="time--date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</span>
	</div>
	<div class="timeline--single">
		<span class="time--date text-right">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</span>
		<div class="timeline--details reverse">
			<h4 class="timeline--title">Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
	</div>
	<div class="timeline--single">
		<div class="timeline--details text-right">
			<h4 class="timeline--title">Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
		<span class="time--date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</span>
	</div>
</div>

Answer 1

我会简化 html，在每行上跟踪右/左并更改元素顺序可能是一个问题，并且对于屏幕阅读器或移动版本来说很烦人（在窄屏幕中，“两侧”可能远非最佳选择，仅使用右侧节省空间）：nth-​​child(odd) 让您可以更改元素的位置、对齐方式等，也可以在每个“行”上更改。

div{box-sizing:border-box;}
.timeline-item{
  color:blue;
}
.timeline{overflow:hidden;position:relative;}
.timeline:after{display:block;content:" ";width:2px;height:100%;position:absolute;left:50%;background:green;}/*vertical bar*/
h4{margin:0;}

.timeline-item .timeline-date{clear:both;float:left;width:50%;text-align:right;;padding:0 1rem 1rem;}
.timeline-item .timeline-details{float:right;width:50%;text-align:left;padding:0 1rem 1rem;position:relative;}
.timeline-item:nth-child(odd){
  color:red;
}
.timeline-item:nth-child(odd) .timeline-date{float:right;text-align:left;}
.timeline-item:nth-child(odd) .timeline-details{float:left;text-align:right}

/*branches*/
.timeline-item .timeline-details:before{display:block;content:" ";height:2px;width:1rem;background-color:green;position:absolute;top:0.5em;left:0;}
.timeline-item:nth-child(odd) .timeline-details:before{right:0;left:initial;}

<div class="timeline at-timeline">
	<div class="timeline-item">
    <div class="timeline-date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</div>
		<div class="timeline-details">
			<h4>Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
   </div>
    	
      <div class="timeline-item">
    <div class="timeline-date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</div>
		<div class="timeline-details">
			<h4>Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
   </div>
   <div class="timeline-item">
    <div class="timeline-date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</div>
		<div class="timeline-details">
			<h4>Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
   </div>
   <div class="timeline-item">
    <div class="timeline-date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</div>
		<div class="timeline-details">
			<h4>Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
   </div>
	</div>