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

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>

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

Tags:

Html

Css

Css Shapes

Recent Posts