css - 伪元素之前/之后

Question

我正在使用链接左侧的图像。
现在，我使用图像的::before 属性来显示，但它显示在链接的上方。

我需要对齐它。这是一张照片: Link

我使用的代码是:

 .vocabulary-duration::before {
     content: "";
     float: left;
     font-family: "FontAwesome";
     font-size: 18px;
     padding-right: 0.5em;
 }

Answer 1

您可以删除float 并使用inline 或inline-block 然后使用vertical-align

.vocabulary-duration::before {
  content: "";
  font-family: "FontAwesome";
  font-size: 18px;
  padding-right: 0.5em;
  vertical-align: middle;
  display: inline-block;
}

<div class="vocabulary-duration">asdf</div>