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

也许这就是你想要的演示。

分隔符由:before标签组成。里面的内容构成了图像。