如何实现a标签文本换行时对齐自身文本而非左侧序号

以下是调整后的完整CSS代码：

ul.myul {
  counter-reset: li;
  position: relative; /* 作为红色竖线的定位基准 */
}

ul.myul li {
  counter-increment: li;
  list-style: none;
  margin-bottom: 10px;
  padding-left: 85px; /* 给左侧序号、竖线预留空间，所有文本默认在该区域右侧展示 */
  position: relative; /* 作为序号伪元素的定位基准 */
}

ul.myul li a::before {
  content: "0" counter(li);
  font-size: 22px;
  font-family: 'poppinsbold';
  color: red;
  position: absolute; /* 把序号从文本流中脱离，固定在左侧预留区域 */
  left: 0;
  top: 0;
}

.myul::after {
    content: "";
    width: 2px;
    height: 100%;
    background: red;
    position: absolute;
    top: 0;
    left: 78px;
}

核心调整逻辑：

• 原有实现中序号伪元素属于行内元素，和a标签文本同属行内流，换行后文本会不受伪元素margin影响，直接顶到容器最左侧。修改后将序号伪元素改为绝对定位，不再占用文本流空间，同时给li设置左内边距预留序号和竖线的展示位置，所有文本默认在右半区域展示，换行后自然保持右对齐规则，不会越过红色竖线。
• 给ul添加相对定位，修正红色竖线的绝对定位基准，避免页面布局变化时竖线位置偏移。
• 如果需要调整序号和文本的间距，只需同步修改li的padding-left、竖线的left、序号伪元素的left三个数值即可，适配性更强。

内容的提问来源于stack exchange，提问作者Jack The Baker