Is it possible to create this style without using a wrapper? - html

Question

Nobel Prize to anyone who can help me out with this.
I need to create the following style:
Constraints: Can only use CSS. That field is generated as an h3 tag by the content management system. Cannot write HTML to place it inside a wrapper. Would prefer not to use a background image since the client has not given me one. Cannot to resort to JavaScript because this style needs to apply to multiple pages and I don't have a global JavaScript file in the environment I'm using.
Here's a fiddle: http://jsfiddle.net/d7qrLLug/

Answer 1

You can achieve this using css borders:
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

You can achieve this using before and after pseudo elements.
h3:before, h3:after {
border-top: solid 1px white;
content: "";
display: block;
}
See this jsfiddle:
http://jsfiddle.net/d7qrLLug/5/

Answer 3

That's actually very simple:
Demo: 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;
}
Note: You need absolute positioning on :before and :after to not change the original height of the produced h3 element, if that isn't important, this will do the job:
Demo http://jsfiddle.net/d7qrLLug/12/
h3:before,
h3:after {
display:block;
width:100%;
content:"";
border-top: 1px solid #fff;
}