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

这可能是因为悬停效应。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

CSS堆积的图标 - 图标堆叠在其他图标的顶部

2 个答案: