代码之家 › 专栏 › 技术社区 › lem.mallari

在我的li项下添加文本

web css3 html5 css

lem.mallari · 技术社区 · 6 年前

我目前正在我的一个项目中进行某种进度跟踪。我已经完成了以下工作:

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下面添加一个跨度来标记每个步骤。我试着添加一个样式;但是当我添加较长的文本时,它会破坏我的布局。

1 回复 | 直到 6 年前

kiranvj 6 年前

你在找这样的东西吗。此代码从中提取文本 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; }

宽度:2米;
高度:2米;
文本对齐:居中;
线高:2米;
边界半径:1米;
背景:灰色;
边缘:0 1米;
显示:内联块;
位置:相对位置;
}

李:以前{
内容:'';
位置:绝对位置;
左:-4em;
宽度:4em;
背景:浅灰色;
}


李:第一个孩子:以前{
显示:无;

.主动{
背景:红色;
}

背景:浅灰色;

.active~li::之前{
背景:浅灰色;
}
位置:绝对位置;
左:0;
线高:110%;

<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>