0

Изучаю CSS. Делаю иконку-гамбургер. Нужно выровнять линию по верхнему и нижнему краю кнопки с помощью псевдоэлементов before и after. Получается так, что все линии выстроились в одну. Не могу понять, в чем проблема. Подскажите, пожалуйста. p.s. знаю, что можно сделать это по-другому и намного проще, но мне нужно понять в чем проблема именно тут.

    .burger {
        width: 45px;
        display: block;
        height: 45px;
        position: relative;
        right: 0;
        top: 0;
        margin: 0;
        font-size: 0;
        box-shadow: none;
        cursor: pointer;
        border: 1px solid black;
        padding: 0;
        background-color: transparent;
        outline: none;
    
    }
    
    .burger:focus {
        outline: none;
    }
    
    .burger span {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 7px;
        background-color: black;
        left: 0;
        border-radius: 3px;
    }
    
    
    .burger span::before, .burger span::after {
        display: block;
        position: absolute;
        width: 100%;
        height: 7px;
        background-color: black;
        content: "";
        left: 0;
        border-radius: 3px;
        
    
    }
    
    .burger span::before {
    top: 0;
    
    }
    
    .burger span::after {
    
    bottom: 0;
    }
    <button class="burger burger_line"> 
          <span></span>
    </button>

1 ответ 1

1
  1. У вас span высотой в 7 пикселей.
  2. Вы псевдоэлементы сажаете на верх и низ родительского элемента, при этом они такой же высоты.
  3. Самое простое задать им не по 0, а -10px, скажем, тогда они разъедутся в стороны.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.