I was in the process of designing my personal website with Bootstrap, focusing specifically on the resume section where I am implementing a vertical timeline to showcase my experiences.
For the final experience in each section, I wanted to adjust the line length to indicate the conclusion of that particular section using the :last-child selector. However, I encountered difficulties making it work with nested divs.
Unfortunately, my CSS seems to be selecting only the very last instance of section-item instead of the last one for each section-col.
Below is a snippet of my HTML:
<div class = "container h-100 contact-form">
<h2>Resume</h2>
<div class = "row justify-content-center">
<div class = "col-md-6">
<div class = "section-col"></div>
<h4>Education</h4>
<br>
<div class = "section-item">
<h5>School Name Here</h5>
<h6>Degree Here</h6>
<p>Location | Class of</p>
</div>
<div class = "section-item">
<h5>Second School Name</h5>
<h6>2nd School Name Location</h6>
<p>Graduation</p>
</div>
<br>
</div>
<div class = "section-col">
<h4 class = "section-name">Professional Experience</h4>
<br>
<div class = "section-item">
<h5>Company</h5>
<h6>Position</h6>
<p>June 2020 - August 2020</p>
</div>
<div class = "section-item">
<h5>Other company</h5>
<h6>Position</h6>
<p>June 2020 - July 2020</p>
</div><br>
</div>
</div>
The CSS code snippet shows my attempt (The first block generates the line and the second affects the circle):
.section-item {
border-left: 2px solid grey;
padding-left: 15px;
margin-left: 5px;
height: 120px;
}
.section-item > h5{
line-height: 80%;
}
.section-col .section-item:last-child {
height: 70px;
}
.section-item:before{
content: " ";
display: inline-block;
position: absolute;
border-radius: 50%;
background: #fff;
border: 3px solid black;
width: 15px;
height: 15px;
left: 14px;
right: 0;
}
Displayed below is an image illustrating the issue:
https://i.sstatic.net/wBid3.png
If anyone has suggestions or solutions to this problem, I would greatly appreciate any feedback. Thank you!