5
Ich versuche, eine vertikale Linie mit mehreren Zweigen linken und rechten Seiten der Linie zu zeichnen. Ich habe pseudo Klasse div nach, aber wenn der rechten Seite Text gibt es ein Problem bei der Positionierung des Pfeils.Ist gibt es eine andere Möglichkeit, diese Klasse zu schreiben.Kann jemand vorschlagen, wie man diese Klasse schreiben?Vertikale Linie mit Niederlassungen in css
Jede Hilfe wird geschätzt. 
für Inspiration Blick auf diese 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;">
\t <div class="timeline--single">
\t \t <div class="timeline--details text-right">
\t \t \t <h4 class="timeline--title">Title</h4>
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
\t \t </div>
\t \t <span class="time--date">
\t \t \t <span class="date">01</span>
\t \t \t <span class="month">January</span>
\t \t \t <span class="year">2017</span>
\t \t </span>
\t </div>
\t <div class="timeline--single">
\t \t <span class="time--date text-right">
\t \t \t <span class="date">01</span>
\t \t \t <span class="month">January</span>
\t \t \t <span class="year">2017</span>
\t \t </span>
\t \t <div class="timeline--details reverse">
\t \t \t <h4 class="timeline--title">Title</h4>
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
\t \t </div>
\t </div>
\t <div class="timeline--single">
\t \t <div class="timeline--details text-right">
\t \t \t <h4 class="timeline--title">Title</h4>
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
\t \t </div>
\t \t <span class="time--date">
\t \t \t <span class="date">01</span>
\t \t \t <span class="month">January</span>
\t \t \t <span class="year">2017</span>
\t \t </span>
\t </div>
</div>
aber tun Sie Ihren eigenen Code schreiben wollen? oder auch die Demo nutzen? – Leo
Ich möchte die gleichen HTML-Klassen verwenden. Ich möchte HTML nicht nur in CSS ändern Ich möchte den Code ändern. – Husna
Ich habe einfach den Code aus der Demo extrahiert, und ich habe ihr CSS verwendet. vielleicht hilft es Ihnen https://jsfiddle.net/Micio/27ehjpt3/ – Leo