Question 208891 in Html Question posted in
Some basic documentation can be found here.

Html – How to add a vertical line between two Divs but not if it is the final Div?

I have the following HTML that is a list of events over a time period.

Few Issues I noticed:

I am having some issues displaying a vertical line between one event to another event. This is what I was hoping it would look like:expected behavior.

But this is how it currently is:current behavior. I am not sure why my vertical line is not stopping before the next event. Right now, it is going over it.

Also, if it is the final event (in my case event_three) then there should be no vertical line for it, since there is no other events after that. Is this possible to do this using CSS or does this have to be done only through JavaScript?

HTML:


<div class="Items">
    <div class="event event_one">
        <div class="item-title">
            <h3>2021</h3>
        </div>
        <div class="item-icon">
            <i class="fas fa-tree"></i>
        </div>
        <div class="item-content">
            <p>Solar Sytem</p>
        </div>
    </div>
    <div class="event event_two">
        <div class="item-title">
            <h3>2022</h3>
        </div>
        <div class="item-icon">
            <i class="fas fa-tree"></i>
        </div>
        <div class="item-content">
            <p>About the Trees</p>
        </div>
    </div>
    <div class="event event_three">
        <div class="item-title">
            <h3>Now</h3>
        </div>
        <div class="item-icon">
            <i class="fas fa-tree"></i>
        </div>
        <div class="item-content">
            <p>About the Ocean</p>
        </div>
    </div>
</div>

CSS:

.event {
    display: flex;
    padding: 0px 8px 0px 8px;

    .item-title {
        padding-right: 40px;
    }

    .item-icon,
    .item-content {
        margin: 18px 0px 0px 18px;
    }

    .item-icon {
        border-radius: 13px;
        height: 30px;
        width: 30px;
        color: #fff;
        background-color: #007749;
        padding: 4px;
        margin-left: -28px;
        box-sizing: border-box;
    }

    /* to display vertical line */
    .item-content::before {
        content: '';
        position: absolute;
        height: calc(100% + 20px);
        width: 4px;
        background: #000f80;
        margin-top: 30px;
        margin-left: -47px
    }

    .item-content {
        padding: 12px 12px 12px 12px;
        background: #FFFF;
        border: 1px solid #DBDADA;
        color: #000;
    }
}
Tags:

2

Answers


  1. 0

    Make this changes to your CSS

    CSS

    .event {
    display: flex;
    padding: 0px 8px 0px 8px;
    overflow: hidden;
    position: relative;
}
.event:last-child .item-content::before {
    display: none;
}
    Login or Signup to reply.
  2. 0

    your vertical line is not stopping before the next event because you set .item-content::before position:absolute and height:calc(100% + 20px), but you did not set it’s parent (here .event) position:relative.

    for elements having absolute position property, some properties such as height,width,top,left,right,… calculate respect to their first parent which has relative position.

    so add this styles:

    .event {
  position: relative;
}

    and to not crate line for last item you can write:

    .event:not(:last-child) .item-content::before {
    content: '';
    position: absolute;
    height: calc(100% + 20px);
    width: 4px;
    background: #000f80;
    margin-top: 10px;
    margin-left: -47px
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search