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