CODEWITHSUNDEEP
htmlcss
aquavitae
aquavitae

Reputation: 19154

CSS line between table-cell divs

I am trying to draw a basic horizontal timeline, and I can get each element spaced correctly, but I'm stuck drawing lines between them. Here is my html:

<ul class="timeline">
    <li><div class="badge"><i class="fa fa-check"></i></div></li>
    <li><div class="badge"><i class="fa fa-check"></i></div></li>
    <li><div class="badge"><i class="fa fa-check"></i></div></li>
</ul>

And my CSS:

.timeline {
    display: table;
    width: 100%;
}

.timeline > li {
    display: table-cell;
    text-align: center;
}

.timeline > li > .badge {
    width: 50px;
    height: 50px;
    border-radius: 50% 50% 50% 50%;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    color: #fff;
    background-color: #999999;
}

This shows three equally spaced circles with a Font Awesome icon in the centre. Now I want to draw lines between each circle. I thought that I might need to use :after and :before, but nothing I've tried has given any result at all. Here is one attempt:

.timeline > li > badge:after {
    content: " ";
    width: 100%;
    height: 3px;
    background-color: #999999;
}

Upvotes: 0

Views: 1809

Answers (4)

jcaron
jcaron

Reputation: 17720

Add this to the .timeline > li:

position: relative;

And add this new set of rules:

.timeline > li:not(:last-child):after
{
    content: '';
    display: block;
    position: relative;
    left: 50%;
    top: -30px;
    margin-left: 15%;
    width: 70%;
    height: 1px;
    background-color: black;
}

Fiddle: http://jsfiddle.net/jacquesc/Lzvxyfv9/

Upvotes: 4

Zedrian
Zedrian

Reputation: 909

Add the border-right and it should do it

.timeline > li {
    display: table-cell;
    text-align: center;
    border-right:1px solid #000;
}

Upvotes: 0

Viswanath Donthi
Viswanath Donthi

Reputation: 1821

In css you can do it as:

.timeline > li{
    border-right: 1px solid #222222;
}

Upvotes: 0

xkeshav
xkeshav

Reputation: 54060

What about this, add border-right property to li

li{ border-right: 1px solid #999999; }

DEMO

Upvotes: 1

Related Questions