在我的li项下添加文本

Question

我目前正在我的一个项目中开发某种进度跟踪器。我已经进行了以下工作：

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: gray;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before{
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: lightgray;
  z-index: -1;
}


li:first-child::before {
  display: none;
}

.active {
  background: red;
}

.active ~ li {
  background: lightgray;
}

.active ~ li::before {
  background: lightgray;
}

<ul>
  <li>&#10004;</li>
  <li>&#10004;</li>
  <li>&#10004;</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>  

现在，我想在每个li下方添加一个跨度以标记每个步骤。我尝试添加样式化的跨度，但是当我添加较长的文本时，它将破坏我的布局。

Answer 1

您是否正在寻找类似的东西。这段代码从data-step属性中提取文本，并使用伪类进行显示

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: gray;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before{
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: lightgray;
  z-index: -1;
}


li:first-child::before {
  display: none;
}

.active {
  background: red;
}

.active ~ li {
  background: lightgray;
}

.active ~ li::before {
  background: lightgray;
}
li > span { 
  position: absolute;
  top: 2em; 
  left: 0; 
  line-height: 110%;
  color: #000; }

<ul>
  <li data-step="step 1">&#10004;</li>
  <li data-step="step 2">&#10004;</li>
  <li data-step="step 3">&#10004;</li>
  <li data-step="step 4" class="active">4</li>
  <li data-step="step 5">5</li>
  <li data-step="step 6">6</li>
  <li data-step="step 7">7<span>some text</span></li>
</ul>

  

现在，我想在每个li下方添加一个跨度以标记每个步骤。我试过了   添加样式；跨度但是当我添加更长的文本会破坏我的   布局。

只需添加这样的跨度

<li>7<span>some text</span></li> 

并更改样式

li > span { 
  position: absolute;
  top: 2em; 
  left: 0; 
  line-height: 110%;
  content: attr(data-step); 
  color: #000; }

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: gray;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before{
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: lightgray;
  z-index: -1;
}


li:first-child::before {
  display: none;
}

.active {
  background: red;
}

.active ~ li {
  background: lightgray;
}

.active ~ li::before {
  background: lightgray;
}
li > span { 
  position: absolute;
  top: 2em; 
  left: 0; 
  line-height: 110%;
  color: #000; }

<ul>
  <li>&#10004; <span>step 1</span></li>
  <li>&#10004;<span>step 2</span></li>
  <li>&#10004;<span>step 3</span></li>
  <li class="active">4<span>step 4</span></li>
  <li>5<span>step 5</span></li>
  <li>6<span>step 6</span></li>
  <li>7<span>some text</span></li>
</ul>