Question

我正在处理进度步骤小部件，并尝试使用<ol>对每个步骤进行编号。现在，它显示为1 step，这是默认行为。有谁知道我如何定位文本，使其显示为step 1？有关详细信息，请参阅Codepen上的example。谢谢！

Answer 1

只需将&:before更改为&:after

即可

.progress-step-container {
  width: 100%;
  display: flex;
  list-style-type: none;
  margin-left: 0;
}
.progress-step-container:first-child {
  counter-reset: customlistcounter;
}
.progress-step-container .step {
  display: inline;
  max-width: 108px;
  width: 108px;
  text-align: center;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  counter-increment: customlistcounter;
}
.progress-step-container .step.current {
  border-bottom: 6px solid #1578CD;
  max-width: 442px;
  width: 442px;
}
.progress-step-container .step:after {
  content: counter(customlistcounter);
}

<ol class="progress-step-container">
  <li class="step step-1">
    <span class="step-message"></span>
  </li>
  <li class="step step-2 current">
    <span class="step-message">Question</span>
  </li>
</ol>

在有序列表生成的数字之前定位文本

1 个答案: