Alignement du texte avec le bouton Shopify

Question

J'ai ce code html et CSS correspondant dans les Shopify

.mobile-menu-icon { 
 
    @include prefix(transform, rotate(0deg), webkit moz ms o); 
 
    @include prefix(transition, 0.5s ease-in-out, webkit moz ms o); 
 
    width: 6.66 * $mobile-icon-line-thickness; 
 
    height: 5 * $mobile-icon-line-thickness; 
 
    display: block; 
 
    display: block; 
 
    margin: (2 * $gutter/3) auto; 
 
    color: $color-nav; 
 
    background: none; 
 
    border: 0; 
 
    outline: none;

<a> 
 
     <button id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav"> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     
 
     <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span> 
 
     </button></a>

La sortie de ce sur mon site est aussi si (je l'ai fait avec des flèches):

ce que je voudrais faire est d'écrire « MENU » à côté de ce bouton, où je dois dessiner n la ligne rouge à des fins de représentation. J'ai essayé différentes options, mais j'ai du mal à les aligner correctement pour être compatibles avec des affichages de taille différente, ainsi que le bouton restant central, ainsi que le texte restant central au bouton. Toute aide serait grandement appréciée, Merci beaucoup.

Answer 1

.mobile-menu-icon { 
 
    @include prefix(transform, rotate(0deg), webkit moz ms o); 
 
    @include prefix(transition, 0.5s ease-in-out, webkit moz ms o); 
 
    width: 6.66 * $mobile-icon-line-thickness; 
 
    height: 5 * $mobile-icon-line-thickness; 
 
    display: block; 
 
    display: block; 
 
    margin: (2 * $gutter/3) auto; 
 
    color: $color-nav; 
 
    background: none; 
 
    border: 0; 
 
    outline: none; 
 
    } 
 
    .mobile-menu-icon:after{ 
 
    content: 'MENU'; 
 
    } 
 

<a> 
 
     <button id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav"> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     
 
     <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span> 
 
     </button></a>