html - 如何增加箭头进度条 CSS 的高度

Question

我正在尝试实现带箭头的进度条，但遇到了 CSS 错误。当我增加内容的高度时，附加箭头的高度不会增加。尝试运行代码 spinnet，您将了解我面临的错误。错误基于 CSS 和三角形/箭头进度条内容高度

ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: bold;
  counter-reset: li;
}

ol.steps li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  text-align: center;
  color: #3a3a3a;
  background: #dae4eb;
  position: relative;
  margin-left: 43px;
}

ol.steps li:after {
  position: absolute;
  top: 30%;
  left: 100%;
  content: " ";
  height: 0;
  width: 0;
  pointer-events: none;
  border: solid transparent;
  border-left-color: #dae4eb;
  border-width: 19px;
  margin-top: -19px;
}

ol.steps li:first-child {
  margin-left: 0;
}

ol.steps li:first-child span {
  padding: 9px;
}

ol.steps li:first-child span:after {
  border: none;
}

ol.steps li:last-child:after {
  border-width: 0;
}

ol.steps li span {
  display: block;
  padding: 9px 28px 9px 9px;
}

ol.steps li span:after {
  position: absolute;
  top: 50%;
  right: 100%;
  content: " ";
  height: 0;
  width: 0;
  pointer-events: none;
  border: solid #dae4eb;
  border-left-color: transparent;
  border-width: 19px;
  margin-top: -19px;
}

ol.steps li span:before {
  content: counter(li) " ";
  counter-increment: li;
}

ol.steps>li {
  float: left;
}

ol.steps li.current {
  height: 60px;
  color: #fff;
  background: #0078b4;
}

ol.steps li.current:after {
  border-left-color: #0078b4;
}

ol.steps li.current span:after {
  border-color: #7b7b7b;
  border-left-color: transparent;
}

ol.steps li.step1 {
  z-index: 9;
}

ol.steps li.step2 {
  z-index: 8;
}

ol.steps li.step3 {
  z-index: 7;
}

ol.steps li.step4 {
  z-index: 6;
}

ol.steps li.step5 {
  z-index: 5;
}

ol.steps li.step6 {
  z-index: 4;
}

ol.steps li.step7 {
  z-index: 3;
}

ol.steps li.step8 {
  z-index: 2;
}

ol.steps li.step9 {
  z-index: 1;
}

ol.steps li.step10 {
  z-index: 0;
}

<ol class="steps">
  <li class="step1 current"><span><br>Submitted</span></li>
  <li class="step2"><span><br>.</span></li>
  <li class="step3"><span><br>.</span></li>
  <li class="step4"><span><br>.</span></li>
  <li class="step5"><span><br>.</span></li>
</ol>

错误图像：在此处输入图像描述

我尝试了许多 CSS 调整，但成功匹配了高度

标签： htmlcss