вставить текст между верхней и нижней части мобильного меню "гамбургер"
Есть мобильное меню "Гамбургер", состоящее из трех полосок. Пытаюсь внедрить текст между верхней и нижней. Должно получиться, как на картинке (в вопросе). Не получается, никак. Как это сделать, подскажите, пожалуйста. Спасибо.
#header_menu_adaptive:checked ~ .header_menu_adaptive_button > span {
transform: rotate(45deg);
}
#header_menu_adaptive:checked ~ .header_menu_adaptive_button > span::before {
top: 0;
transform: rotate(0);
}
#header_menu_adaptive:checked ~ .header_menu_adaptive_button > span::after {
top: 0;
transform: rotate(90deg);
}
#header_menu_adaptive:checked ~ .header_content_one_menu {
visibility: visible;
left: 0;
}
.header_menu_adaptive_button {
display: flex;
align-items: center;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 3;
padding: 0 20px 0 0;
}
.header_menu_adaptive_button > span,
.header_menu_adaptive_button > span::before,
.header_menu_adaptive_button > span::after {
display: block;
position: absolute;
width: 50px;
height: 3px;
background-color: red;
transition-duration: .25s;
z-index: 11112;
}
.header_menu_adaptive_button > span::before {
content: '';
top: -8px;
}
.header_menu_adaptive_button > span::after {
content: '';
top: 8px;
}
.header_content_one_menu {
display: grid;
grid-row-gap: 20px;
position: absolute;
visibility: hidden;
top: 0;
border-radius: 0 0 0 0;
left: -100%;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0 30px 0;
background-color: green;
transition-duration: .25s;
}
<input id="header_menu_adaptive" type="checkbox"/>
<label class="header_menu_adaptive_button" for="header_menu_adaptive">
<span></span>
</label>
<ul class="header_content_one_menu">
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
</ul>
