Menu with vertical and horizontal balls

Question

How can I make these two menus?

I got it from the Twitter site, but I didn’t want to get their codes, how can I do that? so that I can add infinite numbers with their respective descriptions..

Answer 1

To do this it is necessary to use the function counter() of property content within CSS pseudo-element ::before of each item in the list. (Documentation).

For positioning use margins, padding and absolute positioning. For the circle, use the property border-radius. In the horizontal option just reposition the <li> with display: inline-block; and change the position and space values. To stay the same only left to remove the "excesses" from the sides.

ol {
  counter-reset: item;
  list-style-type: none;
  padding-left: 20px;
  margin-left: 20px;
  border-style: solid;
  border-color: blue;
  border-width: 0 0 0 1px;
}
li {
  position: relative;
  line-height: 30px;
  margin-bottom: 30px;
}
li::before {
  counter-increment: item;
  content: counter(item);
  position: absolute;
  left: -37px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 1px blue solid;
  background-color: #fff;
  color: blue;
  text-align: center;
}
ol.hori {
  display: inline-block;
  border-width: 1px 0 0 0;
  margin: 0;
  padding: 15px 0 0;
}
ol.hori li {
  display: inline-block;
  margin: 0 15px;
}
ol.hori li::before {
  top: -30px;
  left: 50%;
  margin-left: -15px;
}

<ol>
  <li>item a</li>
  <li>item b</li>
  <li>item c</li>
</ol>
<ol class="hori">
  <li>item a</li>
  <li>item b</li>
  <li>item c</li>
</ol>