вертикальное расположение элементов списка с элементами: after

Question

я пытаюсь реализовать этот дизайн, который я сделал.Я создал границы с помощью решения: after elements, но проблема в том, что над ними закрепляются заголовки

Код

ul {
  width: 150px;
}

li {
  text-decoration: none;
  list-style-type: none;
  position: relative;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

li:after {
  content: "";
  position: absolute;
  left: 25%;
  bottom: 0;
  height: 1px;
  width: 50%; /* or 100px */
  border-bottom: 1px solid #000;
}

<ul>
  <li>test</li>
  <li>test</li>
</ul>

Answer 1

Обновите свой стиль li с помощью этого,

li {
    text-decoration: none;
    list-style-type: none;
    position: relative;
    text-align: center;
    /* margin-top: 10px; */
    /* margin-bottom: 10px; */
    line-height: 30px;
    padding: 10px 0;
}

Просто добавили отступ вместо поля и только высоту строки.

Пожалуйста, проверьте демонстрацию https://jsfiddle.net/wfo2dkh1/

Answer 2

Здесь, используя пользовательские изменения в CSS, вы можете получить то, что вы хотите

ul{
 width: 150px;
    }

    li{
            text-decoration: none;
            list-style-type: none;
            position: relative;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
            line-height:20px;
            vertical-align:middle;
        }

  li:after{  content : "";
  position: absolute;
  left    : 25%;
  bottom  : -12px;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid #000;
}

<ul>
    <li>test</li>
    <li>test</li>
       <li>test</li>
    <li>test</li>
       <li>test</li>
    <li>test testtesttesttesttesttest</li>

</ul>