使用按钮Shopify

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我网站上的输出结果如此（我用箭头指出）：

我想做的是写＆＃34; MENU＆＃34;在这个按钮旁边，为了表示的目的，我绘制了红线。我已经尝试了各种选项，但是我正在努力将它们正确地对齐以兼容不同尺寸的显示器，以及保持中央的按钮，以及保留在按钮中央的文本。

非常感谢任何帮助， 非常感谢。

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>