Можно ли таким способом делать бургер меню?

Question

[Василий Сергеевич]

Основной проблемой было то что курсор поинтер срабатывал только на спан а не на весь блок!
Допустима ли такая разметка? Либо можно сделать все чище? Если да то как?

Разметка:

<div class="burger">
       <button class="burger__item" type="button"></button>
 </div>

CSS:

.burger {
    width: 30px;
    height: 18px;
    display: none;
    position: relative;
    cursor: pointer;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

.burger__item,
.burger__item:before,
.burger__item:after {
    content: "";
    display: block;
    outline: none;
    position: absolute;
    top: 8px;
    right: 0;
    width: 30px;
    height: 2px;
    background-color: #fff;
}

.burger__item:before {
    content: ""; 
    top: -8px;
}

.burger__item:after {
    content: "";
    bottom: -8px;
}

Comments

[VegasChickiChicki]

Логичнее тогда сделать кнопку - оберткой, а span - плашками.

Answer 1

[Ankhena]

Зачем так много тегов?

Comments

[Василий Сергеевич]

только outline: none; не хватает) а так круто!

[Ankhena]

Василий Сергеевич, Никогда не делайте outline: none; не заменив его на любой другой подходящий по дизайну вид.