Question

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

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

在上面的博客中，侧边栏中的标题和“分享这篇文章”＃39;标题具有我想要的预期效果，但似乎无法弄清楚如何获得它。我知道HTML和CSS的基础知识，所以这可能是我只是忽略或者还没有学到的东西。

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

提前致谢！

Answer 1

使用:before或:after

示例1：

＆＃13;

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;   
}

＆＃13;

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

＆＃13;

示例2

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

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

你能用其他种类的线条吗？当然 - CSS3允许你使用各种各样的东西，但列表可能太长了，无法在这里列出。

标题每一面的水平线样式

2 个答案: