标题每一侧的水平线样式答案

【问题标题】：Horizontal Line Styling on Each Side of Titles标题每一侧的水平线样式
【发布时间】：2015-06-25 05:15:48
【问题描述】：

我正在开发一个 Wordpress 博客，我正在尝试弄清楚如何在我的一些标题的每一侧添加水平线，就像这个链接中的标题一样：

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

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

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

提前致谢！

【问题讨论】：

标签： html css wordpress styling

【解决方案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>

【讨论】：

感谢您的快速回复。我还没用过那些伪元素，所以例子很完美。

【解决方案2】：

使用浏览器的开发人员工具，检查包含这些标题的 span 元素。您会看到 :before 和 :after CSS3 selectors 使用了一些位置/边框样式。

你能用其他类型的线吗？当然——CSS3 将允许您使用各种各样的东西，但列表可能太长，无法在此处列出。

【讨论】：

感谢您的快速回复。您能否指出可能列出其中一些样式的来源的方向？将不胜感激！