вставить текст между верхней и нижней части мобильного меню "гамбургер"

Есть мобильное меню "Гамбургер", состоящее из трех полосок. Пытаюсь внедрить текст между верхней и нижней. Должно получиться, как на картинке (в вопросе). Не получается, никак. Как это сделать, подскажите, пожалуйста. Спасибо.

#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>

введите сюда описание изображения


Ответы (0 шт):