: после появления псевдоэлемента

Question

Я создаю масштабируемый значок мобильного меню и: после псевдо класса не работает. Это предназначено для создания трех черных линий для представления значка меню «гамбургер». Создается первая строка, вторая строка создается с использованием: before pseudo class, однако: после псевдо класса не выполняется рендеринг, поэтому третья черная линия не появляется.

JS Fiddle - https://jsfiddle.net/eeks1swx/

Я не совсем уверен, почему и я не могу понять это. Есть предположения?

.hamburger { 
 
    height: 15px; 
 
    width: 20px; 
 
    position: relative; 
 
    display: block; 
 
    cursor: pointer; 
 
    box-sizing: border-box; 
 
} 
 
.hamburger__line:before, 
 
.hamburger__line:after, 
 
.hamburger__line { 
 
    position: absolute; 
 
    height: 20%; 
 
    background-color: #000; 
 
    width: 100%; 
 
    border-left: 0; 
 
    border-right: 0; 
 
    top: 40%; 
 
} 
 
.hamburger__line:before, 
 
.hamburger__Line:after { 
 
    content: ""; 
 
    height: 100%; 
 
} 
 
.hamburger__line:before { 
 
    top: -200%; 
 
} 
 
.hamburger__line:after { 
 
    top: 200%; 
 
}

<div class="hamburger"> 
 
    <div class="hamburger__line"></div> 
 
</div>

Answer 1

.hamburger__line:before, 
.hamburger__Line:after { 
    content: ""; 
    height: 100%; 
} 

... у вас есть в верхнем регистре L - классы чувствительны к регистру.