如何在中间带有字体真棒图标的标题后创建一条线？

Question

我试图像照片一样做但我真的不知道该怎么做

因此,我应该可以在中间使用任何有趣的图标.

这是我最初的标记:

<h1>Welcome</h1>

h1 {
    font-size: 25pt;
    display: inline-block;
    margin: 0;
    font-weight: 300;
}
h1:after {
    content: '\f209';
    font-family: FontAwesome;
    display: block;
}

在这里,我的小提琴

希望你能帮忙.

Answer 1

通过给你的h1a border-bottom和你的:after图标绝对位于它的中心.同时应用白色背景以确保线条被中断.

h1 {
    font-size: 25pt;
    display: inline-block;
    margin: 0;
    font-weight: 300;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
}

h1:after {
    content: '\f209';
    position: absolute;
    font-family: FontAwesome;
    background-color: #FFF;
    display: block;
    margin-left: 50px;
}

更新小提琴