How do I draw a horizontal line between two circle

问题:

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

回答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

回答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>

回答3:

Here is one solution:

https://jsfiddle.net/sfyuxrs9/

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

回答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

回答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/