jQuery Question
Vertical Line with Branches in css
I trying to draw a vertical line with multiple branches left and right sides of the line. I used
pseudoAny 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>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
I'd simplify the html, tracking right/left on each row and altering the elements order could be a problem and annoying for screen readers or mobile version (In a narrow screen the "two sides" could be far from best obtion, using just right side saves space) :nth-child(odd) let you change the position, alignment, etc of the elements, alternatively on 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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download