html - 如果该过程完成，则在进度条上画一个勾号

Question

我用 CSS 和 HTML 创建了一个简单的进度条。这里我使用了事件、非事件和完成三个类。

.container {
  width: 600px;
  margin: 100px auto;
}

.progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: #7d7d7d;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: "";
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: #55b776;
  background-color: #55b776;
}

.progressbar li.active+li:after {
  background-color: #55b776;
}

.progressbar li.done:before {
  border-color: #55b776;
  background-color: #55b776;
}

.progressbar li.done+li:after {
  background-color: #55b776;
}

.progressbar li.inactive:before {
  border-color: #7d7d7d;
  background-color: #7d7d7d;
}

.progressbar li.inactive+li:after {
  background-color: #7d7d7d;
}

<div class="container">
  <ul class="progressbar">
    <li class="done"></li>
    <li class="active"></li>
    <li class="inactive"></li>
  </ul>
</div>

如果该类处于事件状态，它将显示带有background-color: green的圆圈，
如果该类处于非事件状态，它将显示带有 background-color: grey 的圆圈
我想要的是，在使用“done”类时，我需要用 background-color: green 显示圆圈，并在绿色圆圈内显示刻度线，如下所示。

我尝试了很多，但没能完成。请有人帮助我。 Here is my working fiddle link

Answer 1

在内容中使用刻度线:“✓”；

.container {
      width: 600px;
      margin: 100px auto; 
  }
  .progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #7d7d7d;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: "";
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar li.done:before {
      content: "✓";
      color: #ffffff;
      font-size: 20px;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }
  .progressbar li.done:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.done + li:after {
      background-color: #55b776;
  }
  .progressbar li.inactive:before {
      border-color: #7d7d7d;
      background-color: #7d7d7d;
  }
  .progressbar li.inactive + li:after {
      background-color: #7d7d7d;
  }

<div class="container">
  <ul class="progressbar">
      <li class="done"></li>
      <li class="active"></li>
      <li class="inactive"></li>
  </ul>
</div> 

根据您的要求使用 css

.container {
      width: 600px;
      margin: 100px auto; 
  }
  .progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #7d7d7d;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: "";
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }
  .progressbar li.done:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.done + li:after {
      background-color: #55b776;
  }
  .progressbar li.inactive:before {
      border-color: #7d7d7d;
      background-color: #7d7d7d;
  }
  .progressbar li.inactive + li:after {
      background-color: #7d7d7d;
  }
  
  .progressbar li.done {
    font-size: 16px;
    position: relative;
  }

  .progressbar li.done:after {
    content: " ";
    display: block;
    width: 0.3em;
    height: 0.6em;
    border: solid white;
    border-width: 0 0.2em 0.2em 0;
    position: absolute;
    left: 4.2em;
    top: 26%;
    margin-top: -0.2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index:9;
    background-color: #55b776;
  }

<div class="container">
  <ul class="progressbar">
    <li class="done"></li>
    <li class="active"></li>
    <li class="inactive"></li>
  </ul>
</div>