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

有没有办法制作汉堡菜单＆＃39;基础5中的线条较粗？

1 个答案: