Vertical line with branches in css

Question

I am trying to draw a vertical line with several branches of the left and right sides of the line. I used the pseudo div class after, but when in the right text there is a problem with the arrow positioning. Is there any other way to write this class. Can anyone suggest me how to write this class?

Any help appreciated. for inspiration look at this demo

 .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

I would simplify the html by tracking right / left on each line, and changing the order of elements can be a problem and annoying to read from the screen or mobile version (on a narrow screen, the “two sides” can be far from the best, using only the right side saves space) : nth-child (odd) allows you to reposition, align, etc. elements, alternatively for each "row".

 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> 

Answer 2

You can accomplish this using absolute positioning and a bunch of fields and shims, as in this snippet

 .at-timeline { position: relative; width: 70%; } .at-timeline:after { content: ""; position: absolute; width: 2px; height: 900px; top: 0; left: 50%; background: #2783e8; } .timeline--single { position: relative; margin: 50px 0; } .timeline--single:nth-child(odd) .timeline--details { margin-right: 50%; text-align: right; padding-right: 50px; } .timeline--single:nth-child(odd) .time--date{ position: absolute; left: 50%; top: 0px; margin-left: 20px; } .timeline--single:nth-child(even) .time--date{ position: absolute; right: 50%; top: 0px; margin-right: 20px; } .timeline--single:nth-child(even) .timeline--details { margin-left: 50%; text-align: left; padding-left: 50px; } .at-timeline .timeline--details:before { content: ""; position: absolute; width: 35px; height: 2px; top: 10px; background: #2783e8; } .timeline--single:nth-child(odd) .timeline--details:before { right: 50%; } .timeline--single:nth-child(even) .timeline--details:before { left: 50%; } .timeline--title { margin-top: 5px; } 

 <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 3

I kept all your HTML intact, I just deleted the inline style and changed it to margin to make the layout easier.

On the other hand, I tried not to use absolute units, except when trying to adapt to other units already installed.

The h4 fields match the default Chrome stylesheet. I just made it explicit to make it more portable in other browsers.

 .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: 50%; padding: 15px 50px; position: relative; } .at-timeline h4 { margin-top: 1.33em; } .text-right { text-align: right; } .at-timeline .timeline--details:before { content: ""; position: absolute; width: 35px; height: 2px; top: calc(15px + 1.83em); /* padding details +`margin top h4 + 0.5em */ right: 0; background: #2783e8; } .at-timeline .reverse:before { content: ""; position: absolute; width: 35px; height: 2px; top: calc(15px + 1.83em); left: 0; background: #2783e8; } .at-timeline { position: relative; margin: 100px 100px; } .at-timeline:after { content: ""; position: absolute; width: 2px; left: 0px; right: 0px; margin: auto; top: 0px; bottom: 0px; background: #2783e8; } 

 <div class="timeline at-timeline"> <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>