Css标题标签样式

Question

我想按照以下设计样式标题标签H1！

Header Design

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

Answer 1

我认为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; 
}