html - 标题两侧的水平线样式

Question

我正在写一个 Wordpress 博客，我正在尝试弄清楚如何在我的一些标题的每一侧添加水平线，例如此链接中的标题:

http://falive.jegtheme.com/?slider=highlightslider&homelayout=normal&homesidebar=true&layout=full&header=1&sticky=true

在上面的博客中，边栏中的标题和“分享这篇文章”标题具有我正在寻找的预期效果，但似乎无法弄清楚如何获得它。我了解 HTML 和 CSS 的基础知识，所以这可能是我忽略或尚未学习的东西。

另外，有没有办法通过 CSS 添加更多独特类型的线条(如长 curl 线条)，将这种类型的样式提升到一个新的水平？

提前致谢!

Answer 1

使用:before或 :after

示例 1:

h2{        
    padding: 0 20px;        
    text-align: center;
}
h2:before,
h2:after{
    content: '';    
    width: 150px;    
    height: 1px;
    margin: 0 10px;
    background: #ccc;  
    display: inline-block;
    vertical-align: middle;   
}

<h2>title</h2>
<h2>title title title</h2>

示例 2

div{
    text-align: center;
}
h2 {
    padding: 0 20px;
    position: relative;
    text-align: center;
    display: inline-block;
}
h2:before, 
h2:after {
    content:'';    
    width: 100%;
    position: absolute; top: 50%;
    height: 1px;    
    background: #ccc;    
    transform: translateY(-50%);
}
h2:before{
    right: 100%;
}
h2:after{
    left: 100%;
}

<div>
<h2>title</h2>
<br>
<h2>title title title</h2>
</div>