之前/之後的僞元素

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>