我正在写一个 Wordpress 博客,我正在尝试弄清楚如何在我的一些标题的每一侧添加水平线,例如此链接中的标题:
在上面的博客中,边栏中的标题和“分享这篇文章”标题具有我正在寻找的预期效果,但似乎无法弄清楚如何获得它。我了解 HTML 和 CSS 的基础知识,所以这可能是我忽略或尚未学习的东西。
另外,有没有办法通过 CSS 添加更多独特类型的线条(如长 curl 线条),将这种类型的样式提升到一个新的水平?
提前致谢!
最佳答案
示例 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>
关于html - 标题两侧的水平线样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31036636/