skip to Main Content

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


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search