Html 垂直对齐范围：相对于文本之后

我制作了一个带有链接的菜单，上面有“列表项目符号”，对鼠标悬停做出反应，比如

每个项目都用span包裹，并使用：after创建项目符号

项目符号与文本底部垂直对齐，我希望它们居中

但是，尝试使用

垂直对齐：中间（以及我能找到的任何其他方法）导致了这种情况（检查它表明文本在容器上正确居中），而我似乎找不到任何方法使其正确居中

这是小提琴
 如果此代码满足您的需要，您是否可以尝试：

%linkBase {  
  $fontSize: 40px;
  line-height:40px;
  font-size: $fontSize;
  position:relative;
  &::after {
    $bulletHeight: $fontSize * 0.8;

    content: '';

    display: inline-block;

    width: 2px;
    height: 40px;

    background-color: black;
    top:50%;
    position:absolute;
    margin-top:-20px;
  }
}

.link {
  @extend %linkBase;
}

.linkCentered {
  @extend %linkBase;
}

其思想是将原始链接设置为相对链接，然后将“after”元素设置为绝对位置。然后将该元素的“顶部”设置为50%，将其向下推一半，然后将其向上拉，边缘顶部为其高度的一半。
这是一种常用的项目居中方法。
您能制作一个代码示例吗？应该从一开始就添加它，对此表示抱歉。刚刚编辑过。