仅进度条 CSS 和 HTML

Question

我一直在尝试构建一个仅由 HTML 和 CSS 组成的进度条，尽管在获得 "connected dots" 样式时遇到了一些困难。

因为它基于 :After 元素，我怎样才能将它们放在圆圈后面，某种 z 索引？

理想情况下，点 1 应该连接 2，2 连接 3，3 连接 4。

<section class="steps">
<ul class="checkout">
  <li class="current">
    <div class="index">...</div>
    <div class="caption">Email</div>
  </li>
  <li class="inactive">
    <div class="index">2</div>
    <div class="caption">Your Info</div>
  </li>
  <li class="inactive">
    <div class="index">3</div>
    <div class="caption">Delivery</div>
  </li>
  <li class="inactive">
    <div class="index">4</div>
    <div class="caption">Review</div>
  </li>
</ul>

.steps {
.checkout {
  display: table;
  table-layout: fixed;
  width: 100%;
  li {
    display: table-cell;
    padding-left: 0;
    text-align: center;

    &:before {
      margin: 0 auto;
      display: block;
      width: 30px;
      height: 30px;
      content: "";
      text-align: center;
      float: none;
      position: relative;
      top: 30px;
      border-radius: 100%;
      border: 2px solid #79b93e;
    }

    &:after {
      content: "";
      border: 1px solid rgba(135, 135, 135, 0.2);
      width: 100%;
      webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(180deg);
      display: block;
      position: absolute;
      top: 60px;
      right: -53px;
    }


    &:last-child {
      &:after {
        display: none;
      }
    }

    .caption {
      text-transform: uppercase;
      margin-top: 5px;
      font-weight: 900;
    }
  }
}
.container-fluid  {
    max-width: 550px;
    overflow:hidden;
}

}

Answer 1

您的问题是您没有将 position:relative 设置为 li。 li:after 的连接线对 first not position:inherit ancestor, body if none 是绝对的，在你的版本中，该线应该是对 li 元素的绝对。

https://jsfiddle.net/bzjs1h9r/2/

我的修复：

li {
  position:relative;
  &.index: {
    position:relative;
    z-index: 3;
  }
  &:before {
    z-index: 2;
    background: #fff;
  }
  &:after {
    z-index: 1;  
  }
}

还有一些位置调整。

ps：li:after的旋转在这里似乎没有意义。

Answer 2

当我遇到这个 link 时，我遇到了一个非常相似的问题。它提供了如何单独使用 css 创建进度条的示例。我刚刚取出 css 并在我的项目中使用它。

http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

这是一个带有基本示例的 fiddle https://jsfiddle.net/matt_laza/6rdurftm/

#progressbar { margin-bottom: 30px; text-align:center; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step}
#progressbar li {width:25%; list-style-type: none; text-transform: uppercase; font-size: 11px; float: left; position: relative;}
#progressbar li:before { content: counter(step);counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: #CCC; border-radius: 3px; margin: 0 auto 5px auto;}
#progressbar li:after { content: ''; width: 100%; height: 2px; background: #CCC; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/}
#progressbar li:first-child:after { /*connector not needed before the first step*/ content: none;}
#progressbar li.active:before, #progressbar li.active:after{ background: #27AE60; color: white;}

<ul id="progressbar">
    <li class="active">Email</li>
    <li>Info</li>
    <li>Delivery</li>
    <li>Review</li>
</ul>

Answer 3

 <div class="container">
<ul class="progressbar">
<li class="active">EMAIL</li>
<li>YOUR INFO</li>
<li>DELIVERY</li>
<li>REVIEW</li> 
<ul>
</div> 

.container{ 
width:100%;
} 
.progressbar{ 
counter-reset:step;
}
 .progressbar li{
list-style-type: none;
float:left; 
width:22.22%;
position:relative;
text-align:center;
}
.progressbar li:before{
content:counter(step);
counter-increment:step;
width:30px;
height:30px;
line-height:30px;
border:1px solid #0F0;
display:block;
text-align:center;
margin:0 auto 10px auto;
border-radius:50%;
}
.progressbar li:after{
content:'';
position:absolute;
width:100%;
height:1px;
background-color:#ddd;
top:15px;
left:-50%;
z-index:-1; 
}
progressbar li:first-child:after{
content:none;
}

仅进度条 CSS 和 HTML

Progress bar CSS and HTML only

html

css

progress