Question

我正在尝试划分页面的一部分，并将图标置于两个分隔线之间。我想我必须使用::before和::after，所以我写了这个

i:after {
    background-color: #999;
    content: " ";
    display: inline-block;
    height: 3px;
    margin: 0 0 8px 20px;
    text-shadow: none;
    width: 100%;
}

i:before {
    background-color: #999;
    content: " ";
    display: inline-block;
    height: 3px;
    margin: 0 20px 8px 0;
    text-shadow: none;
    width: 100%;
}

在jsfiddle，它似乎根本不起作用。但是当我在chrome中打开索引文件时，它可以解决问题。它将在图标的左侧和右侧显示一条线，但它不会填充整个身体div。任何想法都会很棒。

Answer 1

如果你使用font-awesome你可以在你的菜单中添加这样的图标

这只是一个例子：

<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-about"></i>About</li>
<li><i class="fa fa-contact"></i>Contact</li>

我在jsfiddle上看到你的文件..

更多关于你可以看到的字体真棒..

http://fontawesome.io/

中心带图标的分隔符不会跨越div的宽度

1 个答案: