Question

对于第三方CSS snippet中汉堡包图标的确切生成方式感到有些困惑。在我自己的工作中，我如何解决这个问题，我在background: url中添加了一个图标，但我已经多次浏览过这段代码并且无法理解＆＃39 ;图标＆＃39;已被援引。

会欣赏任何线索吗？

Answer 1

它不是背景图像 - 使用：before和：after css伪选择器创建汉堡包离子：

.menu-opener-inner::before, .menu-opener-inner::after {
   background: white;
   content: '';
   display: block;
   height: .5rem;
  width: 2.5rem;
 }

基本上，.menu-opener-inner被设置为白色水平条，其高度为.5 rem，宽度为2.5 rem。然后在使用伪选择器之前和之后创建了另一个条。

当它处于活动状态时，它是透明的，伪条纹旋转45度。所有的CSS - 得到了它

CSS：这个插件中如何生成汉堡包图标？

1 个答案: