How do I draw a horizontal line between two circles with CSS?

Question

How do I draw a horizontal line in between 2 circles in CSS?

It has to be in the middle of them just as shown in the screenshot.

Example here:

I have drawn the 2 circles, but don't know how to connect them.

 #status-buttons a { color: black; display: inline-block; font-size: 17px; font-weight: normal; margin-right: 0; text-align: center; text-transform: uppercase; min-width: 150px; text-decoration: none; } #status-buttons a:hover { text-decoration: none; } #status-buttons a.active span { color: white; background: #ACCF5B; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; } #status-buttons span { color: white; background: #22bacb; display: block; height: 45px; margin: 0 auto 10px; padding-top: 20px; width: 60px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; }

 <div id="status-buttons" class="text-center"> <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> <a href="#/form/tusdatos"><span>2</span> Step 2</a> </div>

See demo on JSFiddle

Answer 1

You can use a pseudo-element to insert an absolutely-positioned border:

 #status-buttons { position: relative; /* 1 */ display: inline-block; /* 2 */ } #status-buttons::after { /* 3 */ content: ""; position: absolute; width: 50%; z-index: -1; /* 4 */ top: 35%; left: 25%; border: 3px solid #ACCF5B; } #status-buttons a { color: black; display: inline-block; font-size: 17px; font-weight: normal; margin-right: 0; text-align: center; text-transform: uppercase; min-width: 150px; text-decoration: none; } #status-buttons a:hover { text-decoration: none; } #status-buttons a.active span { color: white; background: #ACCF5B; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; } #status-buttons span { color: white; background: #22bacb; display: block; height: 45px; margin: 0 auto 10px; padding-top: 20px; width: 60px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; }

 <div id="status-buttons" class="text-center"> <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> <a href="#/form/tusdatos"><span>2</span> Step 2</a> </div>

Notes:

1. Establish nearest positioned ancestor for absolute positioning.
2. Make container consume only the width necessary.
3. Insert pseudo element
4. Ensure that any horizontal line overlap doesn't appear above circles

Answer 2

You can add a new element and position it between the two circles:

 #status-buttons a { color: black; display: inline-block; font-size: 17px; font-weight: normal; margin-right: 0; text-align: center; text-transform: uppercase; min-width: 150px; text-decoration: none; } #status-buttons a:hover { text-decoration: none; } #status-buttons a.active span { color: white; background: #ACCF5B; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; } #status-buttons span { color: white; background: #22bacb; display: block; height: 45px; margin: 0 auto 10px; padding-top: 20px; width: 60px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; } #line { position: absolute; top: 42px; left: 112px; width: 96px; height: 5px; background: #ACCF5B; }

 <div id="status-buttons" class="text-center"> <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> <div id="line"> </div> <a href="#/form/tusdatos"><span>2</span> Step 2</a> </div>

Answer 3

Here is one solution:

https://jsfiddle.net/sfyuxrs9/

It contains a div (which forms the line) which has position: absolute and a negative z-index value. The rest ist just adjusting all the values for width/height/top and left

Answer 4

I guess you can do some thing like this check the following code snippet

 #status-buttons a { color: black; display: inline-block; font-size: 17px; font-weight: normal; margin-right: 0; text-align: center; text-transform: uppercase; min-width: 150px; text-decoration: none; } #status-buttons a:hover { text-decoration: none; } #status-buttons a.active span { color: white; background: #ACCF5B; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; } #status-buttons span { color: white; background: #22bacb; display: block; height: 45px; margin: 0 auto 10px; padding-top: 20px; width: 60px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; } div.linetop { border-top: 1px solid #111111; width:95px; position:absolute; top:40px; left:115px; }

 <div id="status-buttons" class="text-center"> <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> <a href="#/form/tusdatos"><span>2</span> Step 2</a> </div> <div class="linetop"></div>

Hope this helps

Answer 5

Here you go.

<div id="status-buttons" class="text-center">
    <a href="#/form/regalo" class="active"><span>1</span> Step 1</a>
    <a href="#/form/tusdatos"><span>2</span> Step 2</a>
</div>
<div class="line">
</div>

The CSS

 #status-buttons a {
    position: relative;
    color: black;
    display: inline-block;
    font-size: 17px;
    font-weight: normal;
    margin-right: 0;
    text-align: center;
    text-transform: uppercase;
    min-width: 150px;
    text-decoration: none;
        z-index: 1;
}

#status-buttons a:hover {
  text-decoration: none;
}

#status-buttons a.active span {
    color: white;
    background: #ACCF5B;
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;
}

#status-buttons span {
    color: white;
    background: #22bacb;
    display: block;
    height: 45px;
    margin: 0 auto 10px;
    padding-top: 20px;
    width: 60px;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;

}
.line {
    position: absolute;
    border-bottom: 5px solid black;
    width: 20%;
    left: 71px;
    top: 39px;
    z-index: 0;
}

https://jsfiddle.net/norcaljohnny/nwjz2010/

Answer 6

Here's the cleanest solution with flex

 .timeline { display: flex; align-items: center; justify-content: center; } .circle { width: 13px; height: 13px; background: black; border-radius: 50%; } .dashed { width: 100px; border: 1px dashed #C4C4C4; }

 <div class="timeline"> <div class="circle"></div> <div class="dashed"></div> <div class="circle"></div> <div class="dashed"></div> <div class="circle"></div> </div>

Answer 7

You can also use this method :)

 .his-bar { display: flex; position: relative; padding-top: 50px; width: 100%; margin:auto; margin-top: 40px; } .his-bar:before { content: ''; border: 1px solid #727272; position: absolute; top: 60px; right: 0; width: 99%; } .his-bar .point { border: 2px solid #872071; width: 20px; height: 20px; border-radius: 50%; display: inline-block; background-color: #F8F8F8; z-index: 2; position: relative; } .his-bar .point-start:after { content: '2000'; position: absolute; top: 30px; left: -7px; } .his-bar .point-end { margin-left: auto; } .his-bar .point-end:after { content: '2021'; position: absolute; top: 30px; left: -7px; }

 <div class="his-bar"> <span class="point point-start"></span> <span class="point point-end"></span> </div>