Создаем иконку меню из 1 дива. Без псевдоклассов, before и after.
Как создать иконку меню из трех полосок на CSS
Как правило, эта иконка создается несколькими способами. В том числе, при помощи подключения замечательного шрифта FontAwesome (fas fa-bars). Но давайте попробуем сделать это на чистом CSS. Для начала создадим наш HTML элемент:
< div id="lines" ></ div >
CSS:
#lines { border-bottom: 12px double black; border-top: 4px solid black; content: ""; height: 4px; width: 30px; box-sizing: unset; display: inline-block; vertical-align: middle; }
Что же получится в результате:
Вот и всё, мы научились делать иконку меню. При наведении (ховере) вы можете менять цвет иконки, выставив border-color.