将文本与按钮对齐 Shopify

Question

我在 Shopify 中有这个 html 和相应的 CSS 代码

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

我网站上的输出是这样的（我用箭头指出）：

我想做的是在这个按钮旁边写下“菜单”，我画了红线来表示。我尝试了各种选项，但我正在努力将它们正确对齐以兼容不同尺寸的显示器，以及保持居中的按钮以及保持居中按钮的文本。

任何帮助将不胜感激， 非常感谢。

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>