Question

我想根据以下设计设置标题标签H1的样式！

要创建的基本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;
}

Css标头标签样式

1 个答案: