在CSS中将标题置于2条水平线内 [英] Putting Heading within 2 horizontal lines in CSS
本文介绍了在CSS中将标题置于2条水平线内的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在2对水平线之间放置一个h3标题就像这样:
I want to put an h3 heading between 2 pairs of horizontal line just like that :
任何人都可以帮助我实现这一想法在html,css
Anyone help me with the idea to implement that in html,css
更新
请问我如何使用锚标签(实际上是一个按钮)来做到这一点?我希望它像这样:
Please how can I do this but with an anchor tag ( actually a button ) I want it to be just like that:
推荐答案
您可以设置伪元素的样式,如下所示: http://jsbin.com/epeceb/1/
You could style a pseudoelement, like so : http://jsbin.com/epeceb/1/
CSS
h3 {
width: 500px;
font: 30px Arial;
font-weight: normal;
text-align: right;
position: relative;
}
h3 span {
background: #fff;
margin-right: 15%;
padding: 0 20px;
}
h3:before {
content: "";
width: 100%;
left: 0;
top: 50%;
margin-top: -4px;
position: absolute;
z-index: -1;
height: 0;
border-top: 8px double red;
}
屏幕截图
Screenshot
这篇关于在CSS中将标题置于2条水平线内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文