Inserting elements before and after content - html

Question

I have a headline and I want to insert a block with a certain background before and after the headline with the CSS pseudo elements :before and :after, and I want all them to float left so they're in one line.
The problem is that I can't figure out how to select the actual content of an element. Let's see this example realized with DIVs:
HTML:
<div class="line"></div>
<h1>Text here</h1>
<div class="line"></div>
CSS:
.line {
display: block;
width: 150px;
height: 20px;
float: left;
background-color: grey;
}
h1 {
display: block;
padding: 0 10px 0 10px;
width: 100px;
height: 20px;
font-size: 20px;
float: left;
margin: 0;
text-align: center;
}
So this will work. However, is there a way to realize the same with the :before and :after elements for h1? Can I somehow select the "Text here" and apply the :after class to it?
Thanks in advance!
EDIT:
Let me explain this in a different way. See this link: [link]http://css-tricks.com/examples/hrs/
I want to achieve the same as the last example, only instead of inserting the text via content: "$"; in the CSS, I want that dollar-sign to be inserted as a <h1>-element - ergo the "hr" to wrap around the h1.

Answer 1

If I'm understanding you correctly, you want something like this:
h1, h1:before, h1:after {
display:inline-block;
float:left;
}
h1 {
height: 16px;
width: auto;
position:relative;
padding:0 20px;
}
h1:before {
content: " ";
background:url(...);
height: 16px;
width: 16px;
position:absolute;
left:0;
}
h1:after {
content: " ";
background:url(...);
height: 16px;
width: 16px;
position:absolute;
right:0;
}