CSS: Как отображается значок гамбургера в этом плагине?

Question

Немного смущенно о том, как именно значок гамбургера генерируется в этой третьей стороне CSS snippet. В моей собственной работе, как я это делаю, я включаю png значка через background: url, но здесь я много раз просматривал этот фрагмент и не могу понять, как был вызван «значок».

Поблагодарили бы за какие-либо ключи?

Answer 1

его не фоновое изображение - ион гамбургер создается с помощью: до и: после того, как CSS псевдо селекторов:

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

В основном .menu-нож-внутренняя устанавливается в виде белой горизонтальной полосой, которая .5 rem high и 2.5 rem wide. Затем есть еще один бар, созданный до и после него, используя псевдоселекторы.

Когда он активен, он прозрачный, а псевдо-полосы повернуты на 45 градусов. Все с CSS - gotta luv it