How to make a horizontal line? - css

Question

Hi so here's what I want to do,
http://i1377.photobucket.com/albums/ah45/nikilean/line_zpswvrndxwg.jpg
a horizontal line behind the images? There are 8 circles and I want them to be connected with a line
I made it in bootstrap so the lines are divided into two col 6 and inside each col there are 3 col-3
.stepnumber {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #f9b315;
vertical-align: middle;
color: #fff;
padding-top: 2px;
padding-right: 10px;
font-size: 18px;
font-weight: bold;
margin-top: 150px;
left: -10px;
}
.step {
height: 150px;
width: 150px;
border-radius: 50%;
background-color: #fff;
margin-top: 80px;
margin-right:-60px;
position: absolute;
}
<div class="container">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class="lineline"><div class=stepnumber>1</div></div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
BOOK
</div>
</div>
</div>
<div class="col-md-3">
<div class=stepnumber>2</div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
WAIT
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class=stepnumber>3 </div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
FOUND
</div>
</div>
</div>
<div class="col-md-3">
<div class=stepnumber>4</div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
FLY!
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You can achieve the look you're going for by using the :after (or :before) pseudo class on your wrapping element. You can create a border on the :after element and position it behind your circles using z-index.
Below is an example of how you could construct it.
.timeline {
height: 150px;
line-height: 150px;
display: table;
position: relative;
}
.timeline:after {
position: absolute;
left: 0.5em;
right: 0.5em;
top: 50%;
content: "";
border-top: 3px solid #F9B315;
z-index: 900;
}
.-item {
display: table-cell;
vertical-align: middle;
z-index: 1000;
position: relative;
}
.-item > div {
margin-left: 0.5em;
margin-right: 0.5em;
width: 150px;
height: 150px;
border-radius: 50%;
text-align: center;
line-height: 150px;
font-weight: bold;
font-size: 18px;
background-color: #f9b315;
color: #FFF;
}
.-item:first-of-type > div { margin-left: 0; }
.-item:last-of-type > div { margin-right: 0; }
.-item._number > div {
width: 30px;
height: 30px;
line-height: 2;
}
<div class="timeline">
<div class="-item _number">
<div>1</div>
</div>
<div class="-item _title">
<div>BOOK</div>
</div>
<div class="-item _number">
<div>2</div>
</div>
<div class="-item _title">
<div>WAIT</div>
</div>
<div class="-item _number">
<div>3</div>
</div>
<div class="-item _title">
<div>FOUND</div>
</div>
<div class="-item _number">
<div>4</div>
</div>
<div class="-item _title">
<div>FLY!</div>
</div>
</div>

Answer 2

This is going to take a little bit of work on your part, but here is a way to put a horizontal line behind the div.
Here is the fiddle. The trick for the line is to make a div that's only 1px high. It will take a little bit of thinking on your part:
.line{
height: 1px;
width: 100px;
background-color: black;
z-index: 1;
position: absolute;
top: 25px;
}