Css 有没有办法让'；汉堡包菜单'；5号底线更厚？

基本上，汉堡线（水平白线）有点倾斜：） 我想知道是否有办法使它们变厚

我的HTML：

 <nav class="tab-bar hide-for-medium-up">
        <section class="left-small">
            <a class="left-off-canvas-toggle menu-icon">
                <span></span>
            </a>
        </section>
    </nav>

我走进检查器，试图在运行中更改CSS，但没有任何改变。。。 然而这些都是属性

.tab-bar .menu-icon {
  text-indent: 2.1875rem;
  width: 2.8125rem;
  height: 2.8125rem;
  display: block;
  padding: 0;
  color: white;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  }

---

这些小行由

选项卡栏控制。菜单图标span:after

伪元素

如果要使其更厚，只需增加伪元素的“高度”。但是，你还必须调整<代码>边缘顶部<代码>属性和三个框阴影的位置（基础用来生成白色水平线）以补偿增加的高度。

因此，改变这些属性并保持所有其他属性不变将使它们都变得更厚。如果你有悬停，一定要调整这些。只需在高度、阴影位置和边距顶部进行调整，直到获得所需的效果

例如：

CSS

.tab-bar .menu-icon span:after {
    height: 0.1rem;
    margin-top: -0.3rem;
    box-shadow: 0 -3px 0px 1px white, 0 4px 0 1px white, 0 11px 0 1px white;
}

.tab-bar .menu-icon span:hover:after {
    box-shadow: 0 -3px 0 1px #b3b3b3, 0 4px 0 1px #b3b3b3, 0 11px 0 1px #b3b3b3;
}

---

您可以在JSFIDLE或JSBin上包含HTML或演示吗？这应该做什么？你的HTML与发布的css无关@菜单图标类是用来控制汉堡菜单的…你是什么意思？

.tab-bar .menu-icon span:after {
    height: 0.1rem;
    margin-top: -0.3rem;
    box-shadow: 0 -3px 0px 1px white, 0 4px 0 1px white, 0 11px 0 1px white;
}

.tab-bar .menu-icon span:hover:after {
    box-shadow: 0 -3px 0 1px #b3b3b3, 0 4px 0 1px #b3b3b3, 0 11px 0 1px #b3b3b3;
}