带有伪元素的标题样式

Question

我有一个网页标题应该是这样的

我想用css来设计它。一种方法是将伪元素:before和:after与h3标记一起使用，并使用content:url(...image.png);，但是是否可以仅使用css创建这样的内容，而不是使用图象？

我可以创建那些使用:before和:after的人，通过指定边框，宽度和高度，并绝对定位它们，但这样我就无法创建另一面。 css中有一些行参数可以帮助我创建吗？

我现在所拥有的jsfiddle。

HTML

<div class="container">
    <h3>CONTACT US</h3>
</div>

CSS

.container{
    position:relative;
    left:100px;    
}

h3{
    font-family: Lato;
    font-weight: 300;
    display: inline-block;
    color: #222222;
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 26px;
    position: relative;
}

h3:before{
    content:"";
    border-right: 1px solid #e65941;
    width: 30px;
    height: 40px;
    position: absolute;
    left:-50px;
    bottom:5px;
}

h3:after{
    content:"";
    border-left: 1px solid #e65941;
    width: 30px;
    height: 40px;
    position: absolute;
    right:-50px;
    bottom:5px;
}

Answer 1

我们在这里：

1. 使用h3本身创建左右边框。
2. 在bottom和:before上调整:after以获得您想要的确切结果。

Have a jsBin! - 更新了链接，jsfiddle正在崩溃，所以我上传到jsBin

我做了一些整理，并删除了容器，因为h3样式是自包含的。

CSS

h3 {
    position:relative;
    font-family:Lato;
    font-weight:300;
    display:inline-block;
    color:#222;
    font-size:40px;
    margin:30px;
    border-left:solid 1px #e65941;
    border-right:solid 1px #e65941;
    padding:0 10px;
}
h3:before,h3:after {
    position:absolute;
    content:"";
    border-bottom:1px solid #e65941;
    width:30px;
    bottom:23px
}
h3:before {
    left:-30px
}
h3:after {
    right:-30px
}