CSS层叠式图标 - 图标被堆叠在其他图标顶部

问题描述：

我创造一些stack icons和所有我读过到目前为止请你做这样的事情的帖子 -CSS层叠式图标 - 图标被堆叠在其他图标顶部

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？

答

position:absolute不需要在i:before因为:before呈现在元素之前，并采取了这一个位置。因为它认为存在标记（position:absolute的效果）的内部没有任何元件

当添加到position:absolutei:before，所述i标签的宽度和高度分别等于为0px。

答

这可能是悬停效应。

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>

CSS层叠式图标 - 图标被堆叠在其他图标顶部

相关推荐