CSS3：用里面的图标创建水平线（或边框）

Question

我愿意实现的是在http://mintteal.com/字幕下使用的某种分隔符。里面有一个图标，但我还没有在两边创建这样的水平线。

Answer 1

您可以查看他们的HTML / CSS，了解他们是如何做到的。这是他们的所作所为：

<div class="title">
    <h1>What We Do</h1>
    <i class="fi-wrench"></i>
</div>
<style>
div.title {
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.01em;
    font-weight: 700;
    position: relative;
    margin-bottom: 60px;
    padding-bottom: 30px;
}
.title h1 {
    font-size: 48px;
    margin: 0;
}
.fi-wrench::before {
    content: "\f215";
    font-family: "foundation-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    text-decoration: inherit;
}
div.title i {
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -20px;
    border: 3px solid #41c39f;
    width: 40px;
    height: 40px;
    line-height: 37px;
    background: #f4f4f5;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-align: center;
}
</style>

Answer 2

也许这就是您想要的Demo。

分隔符由:before标记构成。内部的内容构成了图像。