css垂直形式步骤指标？

Question

我正在尝试使用css创建垂直表单步骤指示符。

我发现这个https://codepen.io/erwinquita/pen/ZWzVRE在codepen中工作得很好但是当我尝试从那里复制代码并在我的html页面中使用它时，绿色圆圈不显示！

我甚至复制了代码并将其粘贴在jsfiddle中，但同样的问题也产生了。

这是代码：

.wrapper {
  width: 330px;
  font-family: 'Helvetica';
  font-size: 14px;
  border: 1px solid #CCC;
}

.StepProgress {
  position: relative;
  padding-left: 45px;
  list-style: none;
  
  &::before {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    width: 10px;
    height: 100%;
    border-left: 2px solid #CCC;
  }
  
  &-item {
    position: relative;
    counter-increment: list;
    
    &:not(:last-child) {
      padding-bottom: 20px;
    }
    
    &::before {
      display: inline-block;
      content: '';
      position: absolute;
      left: -30px;
      height: 100%;
      width: 10px;
    }
    
    &::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      left: -37px;
      width: 12px;
      height: 12px;
      border: 2px solid #CCC;
      border-radius: 50%;
      background-color: #FFF;
    }
    
    &.is-done {
      &::before {
        border-left: 2px solid green;
      }
      &::after {
        content: "✔";
        font-size: 10px;
        color: #FFF;
        text-align: center;
        border: 2px solid green;
        background-color: green;
      }
    }
    
    &.current {
      &::before {
        border-left: 2px solid green;
      }
      
      &::after {
        content: counter(list);
        padding-top: 1px;
        width: 19px;
        height: 18px;
        top: -4px;
        left: -40px;
        font-size: 14px;
        text-align: center;
        color: green;
        border: 2px solid green;
        background-color: white;
      }
    }
  }
  
  strong {
    display: block;
  }
}

<div class="wrapper">
<ul class="StepProgress">
  <li class="StepProgress-item is-done"><strong>Post a contest</strong></li>
  <li class="StepProgress-item is-done"><strong>Award an entry</strong>
    Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
  </li>
  <li class="StepProgress-item current"><strong>Post a contest</strong></li>
  <li class="StepProgress-item"><strong>Handover</strong></li>
  <li class="StepProgress-item"><strong>Provide feedback</strong></li>
</ul>
</div>

我不明白我错过了什么。

有人可以就此问题提出建议吗？

Answer 1

在您提供的codepen链接中，LESS已使用CSS预处理器。这就是为什么你不能用jsfiddle或你的本地实例复制相同的代码。简单地说，CSS不适用于您的情况，您正在查看普通的html，因为当您使用css预处理器时，浏览器无法直接呈现它。

如果您希望此代码在jsfiddle中工作，则必须在css框中的名为css的下拉菜单中选择SCSS作为语言。以下是显示其正常工作的链接：https://jsfiddle.net/9k67r0eg/1/

如果你想在本地浏览器中使用它，那么你可能想要编译它。请在此处查看：http://lesscss.org/

但是，LESS也可以转换为纯css。这是您可以直接使用的转换代码：

.wrapper {
  width: 330px;
  font-family: 'Helvetica';
  font-size: 14px;
  border: 1px solid #CCC;
}

.StepProgress {
  position: relative;
  padding-left: 45px;
  list-style: none;
}

.StepProgress::before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0;
  left: 15px;
  width: 10px;
  height: 100%;
  border-left: 2px solid #CCC;
}

.StepProgress-item {
  position: relative;
  counter-increment: list;
}

.StepProgress-item:not(:last-child) {
  padding-bottom: 20px;
}

.StepProgress-item::before {
  display: inline-block;
  content: '';
  position: absolute;
  left: -30px;
  height: 100%;
  width: 10px;
}

.StepProgress-item::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: -37px;
  width: 12px;
  height: 12px;
  border: 2px solid #CCC;
  border-radius: 50%;
  background-color: #FFF;
}

.StepProgress-item.is-done::before {
  border-left: 2px solid green;
}

.StepProgress-item.is-done::after {
  content: "✔";
  font-size: 10px;
  color: #FFF;
  text-align: center;
  border: 2px solid green;
  background-color: green;
}

.StepProgress-item.current::before {
  border-left: 2px solid green;
}

.StepProgress-item.current::after {
  content: counter(list);
  padding-top: 1px;
  width: 19px;
  height: 18px;
  top: -4px;
  left: -40px;
  font-size: 14px;
  text-align: center;
  color: green;
  border: 2px solid green;
  background-color: white;
}

.StepProgress strong {
  display: block;
}

<div class="wrapper">
  <ul class="StepProgress">
    <li class="StepProgress-item is-done"><strong>Post a contest</strong></li>
    <li class="StepProgress-item is-done"><strong>Award an entry</strong> Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
    </li>
    <li class="StepProgress-item current"><strong>Post a contest</strong></li>
    <li class="StepProgress-item"><strong>Handover</strong></li>
    <li class="StepProgress-item"><strong>Provide feedback</strong></li>
  </ul>
</div>