Html - CSS pseudo ::before not working on an Icon element?

Sam
August 4, 2023
234 views
0 votes
2 Answers

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?

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, the i 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.

.box {
  margin: 2rem;
  padding: 1rem;
  border: 1px solid red;
}

.icon {
  width: 50px;
  height: 50px;
  background-color: blue;
  display: block;
  /*give the icon a position of relative*/
  position: relative; 
}

.box:not(:last-child) > .icon::before {
    content: '';
    /*now this will be sized according to the size of the icon*/
    position: absolute;
    height: calc(100% + 28px);
    width: 3px;
    background: #33004e;
    /*then use top or left, and % units to center it*/
    top: 100%;
    left: 50%;
}

<body>
  <div>
    <div class="box"><i class="icon"></i></div>
    <div class="box"><i class="icon"></i></div>
    <div class="box"><i class="icon"></i></div>
    <div class="box"><i class="icon"></i></div>
  </div>
</body>

might mbe you need this

<div>
    <div class="newsTimePeriod item-One">
        <h3>News</h3>
        <i class="fas fa-car"></i>
        <div class="line"></div>
        <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="line"></div>
        <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>
</div>
<style>
.newsTimePeriod {
display: flex;
position: relative;
/* overflow: hidden; */
padding: 0px 7px 0px 7px;
}

.newsTimePeriod h3 {
width: 100px;
float: left;
display: flex;
}

.line {
    position: absolute;
    top: 53%;
    width: 3px;
    height: calc(100% - 50%);
    background-color: #33004e;
    z-index: -1;
    left: 142px;
}

.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;
position: relative; /* Add position relative to keep the pseudo-element inside */
}

.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;
top: 23px; /* Updated top value to align with the icons */
left: 22px; /* Updated left value to align with the icons */
}

/* To hide vertical line on the last icon */
.newsTimePeriod:last-child .line {
    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;
}

/* Update for responsive view on small screens */
.fa-car::before {
    top: 0;
    left: 22px;
    height: 100%;
}
.line {
    position: absolute;
    top: 53%;
    width: 3px;
    height: calc(100% - 30%);
    background-color: #33004e;
    z-index: -1;
    left: 44px;
}


}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS pseudo ::before not working on an Icon element?

Answers