css - 有没有办法让 Foundation 5 中的 'hamburger menu' 行变粗？

Question

基本上，汉堡线(水平白线)有点瘦:)请问有什么方法可以让它们变厚吗？

我的 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:

 .menu-icon:after{
        box-shadow: 0 0px 2px 0px white, 0 0px 2px 0px white, 0 0px 2px 0px white;   
        }

我进入检查器并试图即时更改 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);
  }

Answer 1

小行由 .tab-bar .menu-icon span:after 伪元素控制。

如果你想让它更厚，你只需增加伪元素的“高度”。但是你还必须调整 margin-top 属性和三个框阴影的位置(Foundation 使用它来生成白色水平线)以补偿增加的高度。

因此，更改这些属性并保持其余所有属性不变会使它们变得更厚。如果您有悬停，请务必也进行调整。只需调整高度、阴影位置和边距顶部，直到获得您想要的效果。

示例:

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