Remove last child li - css

Question

I would like to add line before li elements but not include after the last li. How could I do?
Here my CSS:
ul.timeline {
list-style-type: none;
position: relative
}
ul.timeline:before {
content: '';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400
}
ul.timeline > li {
margin-bottom: 10px 0;
padding-left: 10px
}
ul.timeline > li:not(:last-child):after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400
}
JSFiddle

Answer 1

With your current setup, you could set height of the :before line equal to 100% - li height . Or the last li height. This is not very responsive but without knowing what you really have in your project, this is the best ( imo ) solution.
Also you have margin-bottom: 10px 0 . That is not correct. I changed it to margin-bottom: 10px;
/* Timeline Changelogs */
ul.timeline {
list-style-type: none;
position: relative
}
ul.timeline:before {
content: '';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 31px;
width: 2px;
height: calc(100% - 52px);
z-index: 400
}
ul.timeline > li {
margin-bottom: 10px;
padding-left: 10px
}
ul.timeline > li:not(:last-child):after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400
}
<div class="col-12">
<ul class="timeline">
<li>
<p><b>20 Sept 2018</b></p>
<p>This is 20 Sept 2018</p>
</li>
<li>
<p><b>17 Sept 2018</b></p>
<p>This is 17 Sept 2018</p>
</li>
<li>
<p><b>11 Sept 2018</b></p>
<p>This is 11 Sept 2018</p>
</li>
<li>
<p><b>8 Sept 2018</b></p>
<p>This is 8 Sept 2018</p>
</li>
</ul>
</div>
OPTION 2. You could set the before line to the li elements except last-child, not to the ul. And set it a height 100% + 1em. Because in jsfiddle and snippet, p which is inside li has margin: 1em 0 by default. If you change that default margin you should consider that when setting the height.
Also, you need position:relative on li so the :before height is relative to the li not the ul. And so, you need to change the left values for the line and the circle. But it's easily adjustable.
/* Timeline Changelogs */
ul.timeline {
list-style-type: none;
position: relative
}
ul.timeline > li {
margin-bottom: 10px;
padding-left: 10px;
position:relative;
}
ul.timeline > li:not(:last-child):after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: -21px;
width: 20px;
height: 20px;
z-index: 401
}
ul.timeline > li:not(:last-child):before {
content: '';
background: red;
display: inline-block;
position: absolute;
left: -10px;
width: 2px;
height: calc(100% + 1em);
z-index: 400;
top:0;
}
<div class="col-12">
<ul class="timeline">
<li>
<p><b>20 Sept 2018</b></p>
<p>This is 20 Sept 2018</p>
</li>
<li>
<p><b>17 Sept 2018</b></p>
<p>This is 17 Sept 2018</p>
</li>
<li>
<p><b>11 Sept 2018</b></p>
<p>This is 11 Sept 2018</p>
</li>
<li>
<p><b>8 Sept 2018</b></p>
<p>This is 8 Sept 2018</p>
</li>
</ul>
</div>

Answer 2

Please make these changes to your css file:
/* Timeline Changelogs */
ul.timeline {
list-style-type: none;
position: relative
}
ul.timeline > li {
margin-bottom: 10px;
padding-left: 10px;
}
ul.timeline > li:not(:last-child)::after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 401
}
ul.timeline > li:not(:last-child)::before {
content: '';
background: red;
display: inline-block;
position: absolute;
left: 31px;
width: 2px;
height: 80px;
z-index: 400
}
There was some issue with height in your css and use ::before in li rather than in ul.

Answer 3

You can use this simple code:
ul {
margin-left: 10px;
padding: 0;
width: 100%;
border-left: 2px solid #999;
}
li {
list-style: none;
padding-left: 20px;
height: 100%;
margin: 0;
display: block;
position: relative;
}
li:last-child:before { /*With this you hide the last-child li line*/
content: '';
position: absolute;
left: -2px;
top: 0;
width: 2px;
height: 100%;
background-color: #fff;
}
li:after {
content: '';
position: absolute;
top: 0;
left: -12px; /*The half of the circle width minus the border width*/
border-radius: 50%;
border: 2px solid #22c0e8;
width: 20px;
height: 20px;
background: #fff;
}
<ul>
<li>
<p><b>Title</b></p>
<p>Subtitle</p>
</li>
<li>
<p><b>Title</b></p>
<p>Subtitle</p>
</li>
<li>
<p><b>Title</b></p>
<p>Subtitle</p>
</li>
<li>
<p><b>Title</b></p>
<p>Subtitle</p>
</li>
</ul>
For hide the li:last-child line I've used a before pseudoelement that goes over the line and hides it. To position the circles I used an after pseudoelement that is located right in the middle of the line. To do this we start from left: 0 minus half of the width of the circle (10) minus the width of the line (2). Both pseudoelements on the li tag.
Hope it helps you!

Answer 4

If you keep the current HTML structure you can do it like in the code bellow. Just moving your before element to each LI element instead of the UL, and changing the margins and paddings of the P elements inside so the left border stretches accordingly.
ul.timeline > li:before {
content: '';
background: #d4d9df;
display: inline-block;
position: absolute;
left: -9px;
width: 2px;
height: 100%;
z-index: 400
}
ul.timeline > li {
margin-bottom: 10px 0;
padding-left: 10px;
position: relative;
}
ul.timeline > li::after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: -20px;
top: 0px;
width: 20px;
height: 20px;
z-index: 400;
}
ul.timeline > li:last-child:before{
display:none;
}
ul.timeline > li > p{
margin-top: 0px;
padding-top: 0px;
}
ul.timeline > li > p + p{
margin-bottom: 0px;
margin-top: 0em;
padding-top: 0px;
padding-bottom: 1em;
}
http://jsfiddle.net/6tcgr9eq/

Answer 5

Remove the : before last-child and the :after and used
ul.timeline > li:not(:last-child):after {
border-bottom: none !important;
}