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

Question

我对这个第 3 方中汉堡包图标的生成方式有点困惑 CSS snippet .在我自己的工作中，我的做法是通过 background: url 包含图标的 png，但我已经多次浏览此片段，但无法弄清楚“图标” ' 已被调用。

需要任何线索吗？

Answer 1

它不是背景图片 - 汉堡 ionic 是使用 :before 和 :after css 伪选择器创建的:

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

基本上，.menu-opener-inner 被设置为白色水平条，高 0.5 毫米，宽 2.5 毫米。然后使用伪选择器在它前后创建了另一个栏。

当它处于事件状态时，它是透明的，伪条纹旋转 45 度。全部使用 CSS - 一定要喜欢它