标题两侧的水平线样式

Question

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

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

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

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

提前致谢！

Answer 1

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

可以用其他类型的线吗？当然 - CSS3 可以让你使用各种各样的东西，但这个列表可能太长了，无法在 SO 上列出。

Answer 2

使用:before or :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>

标题两侧的水平线样式

Horizontal Line Styling on Each Side of Titles

html

css

wordpress

styling