html - Bootstrap 导航栏如何用两边都有空格的线下划线？

Question

我正在尝试使用 bootstrap 3 制作菜单，我实际上使用的是这样的代码:

        <section id="menu">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-2">
                    <img class="img-responsive" src="logo.jpg" alt="logo">
                </div>
                <div class="col-xs-12 col-sm-2 nana">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                    <p>Some other menu</p>
                </div>
            </div>
        </div>
    </section>

但是我想实现这个:

我如何放置线条，我使用“border-bottom”属性但它扩展了所有列，我只想分隔每个菜单，如果我应用边距它只会破坏菜单。

有办法实现吗？ 我正在考虑使用 :before, :after,

但是我不知道，任何人都可以帮助我!

Answer 1

您可以使用 css ::after Selector为了创造这种东西。

.col-sm-2::after {
    content: "";
    position: absolute;
    width: 90%;
    height: 3px;
    left: 0;
    right: 0;
    margin: auto;
    background: #aaa;
    transition: all .35s;
}
.col-sm-2:hover::after {
    background: #68c122;
}

这是一个小fiddle开始。 但我强烈建议使用 <nav class="navbar" role="navigation"></nav> 用于创建导航。