ハンバーガーメニューの下にテキストを表示したボタンにしたい

cssで作成した三本線のハンバーメニューの下にテキスト「メニュー」を表示したいのですが
テキストを追加すると、三本線に重なり、位置を変更すると三本線が崩れます。
また三本線のだけのときは背景色を設定しボタン風にしましたがテキストを追加するとwidthを変更していなくても
幅が広がります。
メニューの開閉時はjavascriptでhtmlのクラス「.nav-close」が「.nav-open」に変わります。

<div class="nav">
 <div><a id="toggle" class="nav-toggle-btn"><span class="nav-toggle-btn_sen"></span></a></div>
<!-- 省略 -->

 .nav-toggle-btn {
    position: fixed;
    top: 5px;
    left: 10px;
    z-index: 102;
    height:auto;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
 .nav-toggle-btn {
    cursor: pointer;
    padding: 15px 40px 28px 10px;
    margin:0;
    background:#ddd;
  }
 .nav-open .nav-toggle-btn {
  top:0;
  left: 240px;
  }
 .nav-toggle-btn .nav-toggle-btn_sen,
 .nav-toggle-btn .nav-toggle-btn_sen:before,
 .nav-toggle-btn .nav-toggle-btn_sen:after {
    cursor: pointer;
    height: 3px;
    width: 30px;
    background: #333;
    position: absolute;
    display: block;
    content: '';
  }
 .nav-toggle-btn .nav-toggle-btn_sen:before {
    top: -7px;
  }
  .nav-toggle-btn .nav-toggle-btn_sen:after {
    bottom: -7px;
  }
 .nav-toggle-btn .nav-toggle-btn_sen,
 .nav-toggle-btn .nav-toggle-btn_sen:before,
 .nav-toggle-btn .nav-toggle-btn_sen:after {
    transition: all 500ms ease-in-out;
 }
 .nav-open .nav-toggle-btn .nav-toggle-btn_sen {
    background-color: transparent;
  }
 .nav-open .nav-toggle-btn .nav-toggle-btn_sen:before,
 .nav-toggle-btn.active .nav-toggle-btn_sen:after {
    top: 7px;
  }
 .nav-open .nav-toggle-btn .nav-toggle-btn_sen:before {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    bottom: 0;
  }
.nav-open .nav-toggle-btn .nav-toggle-btn_sen:after {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

やったこと

<div><a id="toggle" class="nav-toggle-btn"><span class="nav-toggle-btn_sen"></span><span class="txt">メニュー</span></a></div>

「.txt」にpaddingやmarginを設定しても三本線の下に「メニュー」が表示されませんでした。
また背景色は右側と下側に広がってしまいました。

回答案を試しました。
テキストを<span>タグで括り、三本線の<span>タグの中に入れました

<div><a id="toggle" class="nav-toggle-btn"><span class="text-menu"><span class="nav-toggle-btn_sen">MENU</span></span></a></div>

CSSには下記を追記しました。

.nav-toggle-btn .text-menu{
    position: relative;
    padding-top: 0; 
    width: 0;
    font-size:0.7rem;
}

.nav-toggle-btn .nav-toggle-btn_sen{
    position: absolute;
    top:0;
    left:0;
    }

結果はテキストの「.text-menu」のpaddingには「0」以上の数字を入れるとどんどん三本線とテキストが上に表示され、widthは「0」でも「10px」でも変化がありませんでした。
三本線の「.nav-toggle-btn_sen」には位置を設定すると、テキストも一緒に動きます。