gunnersfan gunnersfan - 1 month ago 19
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: https://jsfiddle.net/gunnersfan/dx19y3f4/

CSS:

.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

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;
}