Как отнести пустое место между линиями к ним же?

Question

[Данил Полянский]

У меня есть кнопка меню из трёх линий, называют ещё бургером. Я хочу сделать так, чтобы пустое место между этими линиями относилось к этим же линиям, то есть чтобы курсор наводился не только на линии, а и на пустое место между ними.

Код: https://codepen.io/danilpolyanskiy/pen/gOpPvxG

Answer 1

[Ankhena]

Comments

[Ankhena]

Данил Полянский, кнопочки всё таки лучше делать тегом button, а не span'ом.
Или ссылкой, если предусмотрено куда отправить пользователя на случай отсутствия js.

[Данил Полянский]

Ankhena, окей, просто к span можно создать псевдо-элементы, с помощью которых и можно сделать такой бургер.

[Ankhena]

Данил Полянский, ну так и к button ;)

Answer 2

[Ilya Muromtsev]

В любом случаи, необходимо обернуть span в div.

div {
   cursor: pointer;
}

Comments

[Ankhena]

В любом случаи

не в любом )))

[Ilya Muromtsev]

Ankhena, имелось ввиду для span