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 框中选择 SCSS 作为下拉菜单中名为 css 的语言。这是显示它正在工作的链接: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>