在文本和圆圈下方的居中文本之间用线条等间隔圆圈

Question

这几乎就是我要做的事情：

这个问题是我希望文本在黄色下方居中，但如果我这样做，我不知道如何保持黄色点之间的线条相互连接。这是Codepen链接到所有代码和CSS，以生成我上面的内容：https://codepen.io/anon/pen/GdwyyK

HTML：

<div class="container">
  <ul class="status-bar">
    <li>
      <div>1</div>
      <div>foo</div>
    </li>
    <li>
      <div>2</div>
      <div>bar</div>
    </li>
    <li>
      <div>3</div>
      <div>baz</div>
    </li>
    <li>
      <div>4</div>
      <div>qux</div>
    </li>
    <li>
      <div>5</div>
      <div>blahblahblah</div>
    </li>
  </ul>

</div>

SCSS：

.container {
  max-width: 100vw;
  width: 950px;
  background-color: lightgrey;
  height: 800px;
}

ul.status-bar {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  display: flex;
  padding: 0 15px;

  li {
    display: flex;
    align-items: center;
    position: relative;

    &:not(:last-child) {
      flex: auto;
      // background-color: purple;
    }

    &:not(:last-child):after {
      content: "";
      border-bottom: 1px solid blue;
      flex: 1;
    }
  }

  li div {
    &:not(:last-child) {
      padding: 5px;
      height: 25px;
      width: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50%;
      border: 1px solid black;
      background-color: yellow;
      position: relative;
    }

    &:last-child {
      position: absolute;
      bottom: -20px;

      text-align: center;
    }
  }
}

如何将“foo”，“bar”等相对于它们下面的点居中并且仍然在点之间连接线？

Answer 1

我会这样做，因为这样会减少代码。

class App:
    def __init__(self, master):
        self.master = master
        self.poll() # start polling

    def poll(self):
        ... do something ...
        self.master.after(100, self.poll)

body {
  margin: 0;
}

.container {
  max-width: 100vw;
  width: 950px;
  background-color: lightgrey;
  padding:5px;
  box-sizing:border-box;
}

ul.status-bar {
  padding: 0;
  margin:0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  /*I used gradient for the line*/
  background: linear-gradient(blue, blue)50% 20px/100% 2px no-repeat;
}

ul.status-bar li {
  display: flex;
  align-items: center;
  flex-direction: column;
}

ul.status-bar li div:not(:last-child) {
  padding: 5px;
  height: 25px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: yellow;
}


/*Hide the overflow of the gradient*/

ul.status-bar li:first-child {
  background: linear-gradient(to left, transparent 50%, lightgrey 0);
}

ul.status-bar li:last-child {
  background: linear-gradient(to right, transparent 50%, lightgrey 0);
}