Css标题标签样式
问题描述:
我想按照以下设计样式标题标签H1!Css标题标签样式
基本CSS创建的盒子很容易,我如何创建我使用这个CSS创建盒子
h1{
background: #a42f2f;
color: #fff;
width: 179px;
padding: 0px 8px;
}
我修正了一个WordPress的后箱线模板:
.page_box h1{
background: #a42f2f;
color: #fff;
width: auto;
padding: 5px 11px;
position: relative;
z-index: 2;
font-size: 18px !important;
margin: 9px 0;
display:inline-block;
}
.page_box{
overflow-x:hidden;
}
.page_box h1:after{
content: "";
position: absolute;
height: 2px;
top: 14px;
width: 900px;
background: #ff6300;
margin-left: 11px;
}
答
我认为this fiddle应该可以帮到你。
h1{
color: #fff;
width: 100%;
padding: 0px 8px;
position: relative;
font-family: sans-serif;
text-transform: uppercase;
}
h1:before {
content: ' ';
width: 178px;
background-color: #a42f2f;
position: absolute;
height: 100%;
z-index: -10;
left: -8px;
}
h1:after {
content: ' ';
border-bottom: 2px solid orange;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: -20;
}
接受,但我也加了我的解决方案感谢您的帮助! – 2014-10-04 12:20:22
非常感谢您接受答案。 – 2014-10-04 12:21:49