如何在li

Question

我有一个带有li样式的ul物品：

<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;
}

问题是当它加载li的右下角的人字形（上面的css中的0203A实体）时，它加载了。我试图弄清楚如何垂直将其加载到中心，但保持在右侧。

我曾考虑过将图标添加为跨度（如果可以的话），但是我在这里不是CSS专家，所以我可能在树错了树皮。

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

这是我要做什么的图片：

Answer 1

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

来解决问题。

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

是结果：

Answer 2

这很简单：

li {
  padding-right: 25px; /* space for the character */
  position: relative; /* needed for absolute positioning of pseudo element */
}

li::after {
  content: ">";
  color: red;
  font-weight: bold;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

<ul><li>
The problem is that it when this loads my chevron (0203A enity in css above) loads in the bottom right of the li:a. I'm trying to figure out how to load it to the center vertically but stay on the right.<br>

I've thought about adding the icon as a span if that would work but I'm not much of a css expert here so I may be barking up the wrong tree.<br>

This is a link to my page nodal2 . rudtek.com/resources/technology/ (spaces added around first ".")<br>

this is picture of what I'm trying to do:<br>
</li></ul>