在圆圈下方添加带圆圈的文字

Question

如何在这些圈子下面添加文字？例如，在1以下，让它说邀请朋友，并在2下写自己选择的自定义T恤。 Codepen

我发现example下面有文字，但问题是它的固定宽度和一些文字会很长，所以它不是一个很好的解决方案。

＆＃13;

＆＃13;

ul {
  text-align: justify;
  position: relative;
  overflow: hidden;
}

ul:before,
.active:after {
  content: '';
  width: 100%;
  border: 2px solid dodgerblue;
  position: absolute;
  top: 1em;
  margin-top: -2px;
  z-index: -1;
}

.active:after {
  border-color: lightblue;
}

ul:after {
  content: "";
  display: inline-block;
  width: 100%;
}

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

.active~li {
  background: lightblue;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我相信这就是你要找的东西？

我在div下添加了两个li - 一个用于数字，一个用于内容。通过将li分解为更多标记，子节点css（特别是边距和溢出）的控制更容易管理。

然后我将ul:before和active:after分开，以便更容易操作。

您可能希望在CSS上执行差异以查看我的所有更改。

享受！

ul {
  text-align: justify;
  position: relative;
  overflow: hidden;
}

ul:before {
  content: '';
  width: 100%;
  position: absolute;
  top: 1em;
  margin-top: -2px;
  border: 2px solid dodgerblue;
  z-index: -2;
}

li.active:after {
  content: '';
  width: 100%;
  position: absolute;
  top: 1em;
  margin-top: -2px;
  margin-left: 1em;
  border: 2px solid lightblue;
  z-index: -1;
}

ul:after {
  content: "";
  display: inline-block;
  width: 100%;
}

li {}

ul li {
  display: inline-block;
}

ul li div.number {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 50%;
  background: dodgerblue;
  margin: 0 1em;
  color: white;
}

ul li div.under {
  position: absolute;
  top 2em;
  left: inherit;
}

.active~li {
}

<ul>
  <li>
    <div class="number">1</div>
    <div class="under">some text</div>
  </li>
  <li>
    <div class="number">2</div>
    <div class="under">some more text</div>
  </li>
  <li>
    <div class="number">3</div>
    <div class="under">even more text</div>
  </li>
  <li class="active">
    <div class="number">4</div>
    <div class="under"></div>
  </li>
  <li>
    <div class="number">5</div>
    <div class="under"></div>
  </li>
</ul>