html - 如何在 li 中间垂直对齐文本

Question

我有一个 ul，里面有 li 个元素，我已经设置了样式:

<ul class="techlist tech">
  <li>
    <a target="_blank" href="#link1">
      <i class="red far fa-file"></i>content block 1
    </a>
  </li>
  <li>
    <a target="_blank" href="#link2">
      <i class="red far fa-file"></i>content block 2
    </a>
  </li>
  <li>
    <a target="_blank" href="#link3">
      <i class="red far fa-file"></i>content block 3.
    </a>
  </li>
</ul>

我想使用 html 实体在末尾添加箭头，我这样做了:

ul.techlist a {
  border: 1px solid black;
  padding: 15px;
  margin: 20px 0;
  display: block;
  color: black;
  text-decoration: none;
}
ul.techlist a::after {
    content: '\0203A';
    color: #e6190f;
    float: right;
    display: inline-block;
    font-size: 2em;
    font-weight: bold;
    font-family: arial;
}

问题是，当它加载我的雪佛龙(上面 css 中的 0203A 实体)时，它会加载到 li:a 的右下角。我正在尝试弄清楚如何将它垂直加载到中心但保持在右侧。

如果可行的话，我考虑过将图标添加为 span，但我不是这里的 css 专家，所以我可能找错了树。

这是我的页面 nodal2 的链接。 rudtek.com/resources/technology/(在第一个“.”周围添加空格)

这是我正在尝试做的事情的图片:

Answer 1

您可以通过添加:position: relative 到a 和

来解决问题

position: absolute;
transform: translate(-50%, -50%);
right: .3em;
top: 50%;

这是结果: