gunnersfan gunnersfan - 10 months ago 101
HTML Question

Add inline horizontal line

I have a traffic light like dashboard view which I have to come up with for one of my pages. But I just cannot have the horizontal lines working inspite of multiple tweaks.

What I want: Want

Fiddle for what I have:


.bubble {
height: 30px;
width: 30px;
color: white;
display: inline-block;
text-align: center;
vertical-align: center;
border-radius: 50%;
margin-right: 50px;
margin-left: 50px;
font-size: 90%;
.red-bg {
background: red;
.green-bg {
background: green;
.blue-bg {
background: blue;

.inline-div {
display: inline;
font-size: 75%;
font-family: verdana;
margin-left: 50px;
margin-right: 50px;

Answer Source

I have made this for you: JsFiddle

.bubbles .line {
  position: absolute;
  top: 50%;
  left: 50px;
  right: 50px;
  border-top: 1px solid black;
  z-index: -1;