CSS層疊式圖標 - 圖標被堆疊在其他圖標頂部

Question

我創造一些stack icons和所有我讀過到目前爲止請你做這樣的事情的帖子 -

i { 
 
     position: relative; 
 
    } 
 
    
 
    i:before { 
 
     content: "\f099"; 
 
     position: absolute; 
 
     font-size: 1.5em; 
 
    } 
 
    
 
    i:after { 
 
     content: "\f096"; 
 
     position: absolute; 
 
     font-size: 2.1em; 
 
     left: 0;  
 
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<i class="fa"></i> 
 
    
 

我有這樣的問題是，當你有多個圖標，

<i class="fa"></i> 
<i class="fa"></i> 

兩個圖標均將堆疊在彼此的頂部。

這解決了這個問題，

i { 
 
      position: relative; 
 
     } 
 
     
 
     i:before { 
 
      content: "\f099"; 
 
      font-size: 1.5em; 
 
     } 
 
     
 
     i:after { 
 
      content: "\f096"; 
 
      position: absolute; 
 
      font-size: 2.1em; 
 
      left: 0;  
 
     }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<i class="fa"></i>

我所做的就是從i:before刪除position: absolute和離開i:afterposition:absolute和left:0和圖標都可以正常使用罰款。

我想知道的是我的解決方案是否正確，以及爲什麼其他解決方案在i:before中有position:absolute？

Answer 1

position:absolute不需要在i:before因爲:before呈現在元素之前，並採取了這一個位置。因爲它認爲存在標記（position:absolute的效果）的內部沒有任何元件

當添加到position:absolutei:before，所述i標籤的寬度和高度分別等於爲0px。

Answer 2

這可能是懸停效應。

i { 
 
    position: relative; 
 
} 
 

 
i:before { 
 
    content: "\f099"; 
 
    position: absolute; 
 
    font-size: 1.5em; 
 
} 
 

 
i:after { 
 
    content: "\f096"; 
 
    position: absolute; 
 
    font-size: 2.1em; 
 
    left: 0; 
 
} 
 

 
i.hideThis { 
 
    color: orange; 
 
    opacity: 0; 
 
} 
 

 
.foo i { 
 
    transition: 0.3s ease-in-out; 
 
} 
 

 
.foo:hover i.hoverThis { 
 
    opacity: 0; 
 
} 
 

 
.foo:hover i.hideThis { 
 
    opacity: 1; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="foo"> 
 
    <i class="fa hideThis"></i><i class="fa hoverThis"></i> 
 
</div>