CSS3：创建内有图标的水平线（或边框）

我愿意实现的是一些在标题下使用的分隔符。里面有一个图标，但我还没有在两侧创建这样的水平线。

你可以看看他们的HTML/CSS，了解他们是如何做到的。以下是他们所拥有的：

我们所做的
部门名称{
文本转换：大写；
文本对齐：居中；
字母间距：0.01em；
字号：700；
位置：相对位置；
边缘底部：60px；
填充底部：30px；
}
.标题h1{
字体大小：48px；
保证金：0；
}
.fi扳手：：之前{
内容：“\f215”；
字体系列：“基础图标”；
字体风格：普通；
字体大小：正常；
字体变体：正常；
文本转换：无；
线高：1；
-webkit字体平滑：抗锯齿；
显示：内联块；
文字装饰：继承；
}
第一分部标题{
位置：绝对位置；
底部：-20px；
左：50%；
左边距：-20px；
边框：3px实心#41c39f；
宽度：40px；
高度：40px；
线高：37px；
背景#f4 ;；
-webkit边界半径：50%；
边界半径：50%；
-moz背景剪辑：填充；
-webkit背景剪辑：填充框；
背景剪辑：填充框；
文本对齐：居中；
}

也许这就是你想要的。

---

分隔符由

：before

标记构成。图像由内部内容构成。

检查该页面上的计算样式有什么困难？