是否可以在不使用包装器的情况下创建此样式？

Question

诺贝尔奖可以帮助我解决这个问题。

我需要创建以下样式：

约束：只能使用CSS。该字段由内容管理系统生成为h3标记。无法编写HTML将其放在包装器中。不喜欢不使用背景图片，因为客户端没有给我一个。无法使用JavaScript，因为此样式需要应用于多个页面，而且我在我正在使用的环境中没有全局JavaScript文件。

这是一个小提琴：http://jsfiddle.net/d7qrLLug/

Answer 1

您可以使用css border实现此目的：

JS Fiddle

h3 {
    color: #FFF;
    text-transform: uppercase;
    background-color: #423025;
    padding: 5px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    border-style: double;
    border-width:4px;   
    border-left: none;
    border-left: none;
}

Answer 2

您可以使用伪元素之前和之后实现此目的。

h3:before, h3:after {
border-top: solid 1px white;
content: "";
display: block;
}

看到这个jsfiddle： http://jsfiddle.net/d7qrLLug/5/

Answer 3

实际上非常简单：

演示： http://jsfiddle.net/d7qrLLug/11/

h3 {
    color: #FFF;
    text-transform: uppercase;
    background-color: #423025;
    padding: 5px;
    position:relative;
}
h3:before {
    position:absolute;
    top: 3px;
    display:block;
    width:100%;
    content:" ";
    border-top: 1px solid #fff;
}
h3:after {
    position:absolute;
    bottom: 3px;
    display:block;
    width:100%;
    content:" ";
    border-top: 1px solid #fff;
}

注意：您需要在:before和:after上进行绝对定位才能更改生成的h3元素的原始高度，如果不是{＆1;}重要的是，这将完成这项工作：

演示 http://jsfiddle.net/d7qrLLug/12/

h3:before,
h3:after {
    display:block;
    width:100%;
    content:"";
    border-top: 1px solid #fff;
}