I have the following HTML that looks like this:
Here is the HTML:
<div class="newsTimePeriod item-One">
<h3>News</h3>
<i class="fas fa-car"></i>
<div class="aboutItem">
<p>Fire is the rapid oxidation of a material
in the exothermic chemical process of combustion,
releasing heat, light, and various reaction products.
</p>
</div>
</div>
<div class="newsTimePeriod item-Two">
<h3>Old News</h3>
<i class="fas fa-car"></i>
<div class="aboutItem">
<p>Water is an inorganic with the chemical formula H 20.
It is a transparent, tastless, odorless, and nearly
colorless chemical substance.
</p>
</div>
</div>
I trying to display a vertical line to the icon (fa-car) and connect it to the next icon. If it is the last icon, then the vertical line does not get displayed. For example
something like this:
For some reason the vertical line does not work with my current CSS.
.newsTimePeriod {
display: flex;
position: relative;
overflow: hidden;
padding: 0px 7px 0px 7px;
}
.newsTimePeriod h3{
width: 100px;
float: left;
display: flex;
}
.fa-car, .aboutItem{
margin: 18px 0px 0px 18px;
}
.fa-car {
border-radius: 13px;
height: 29px;
width: 29px;
color: #fff;
background-color: #001277;
padding: 5px;
box-sizing: border-box;
margin-top: 12px;
}
.aboutItem {
padding: 14px 14px 14px 14px;
max-width: 570px;
background: #FFFFFF;
border: 1px solid #DBDADA;
color: #000;
}
/* To display vertical line*/
.fa-car::before {
content: '';
position: absolute;
height: calc(100% + 28px);
width: 3px;
background: #33004e;
margin-top: 30px;
margin-left: 6px;
}
/* To hide vertical line on the last icon*/
.newsTimePeriod:last-child .fa-car::before {
display: none;
}
@media (max-width: 768px) {
.newsTimePeriod {
flex-direction: column;
}
.newsTimePeriod .aboutItem {
width: 70%;
align-self: end;
margin: auto;
}
.newsTimePeriod h3 {
flex-direction: row-reverse;
padding: 0 0 0 22px;
}
}
I noticed that if I wrapped the icon class inside a div
, then the vertical line CSS works, but I don’t want the icons class wrapped inside a div.
Is there something wrong with my CSS?
2
Answers
Not sure if this is what you are asking for, but I made a simple demo to try it and I think the main issue is the positioning. If the
::before
‘s parent, thei
tag isn’t positioned relatively, giving it absolute positioning will make it’s position be placed according to the whole page. Also, you can use:not()
to select all except the last child.might mbe you need this