CSS Stacked иконки - Иконки укладка поверх других иконок

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>

Что я сделал удалить position: absolute из i:before и оставить position:absolute и left:0 в i:after и иконки работают прекрасно.

Что я хочу знать, правильно ли мое решение и почему другие решения имеют position:absolute в i:before?

Answer 1

position:absolute не требуется в i:before, потому что :before визуализируется перед элементом и занимает позицию этого.

Когда вы добавили position:absolute к i:before, ширина и высота i тега была равна 0px, потому что он считает, что нет никакого элемента внутри тега (эффект position:absolute).

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>