Background image (pattern) after heading using CSS only - html

Question

Is this possible to create following effect using CSS. I only have a H2 element in HTML, and i do not have any control on HTML of the page. I can only change CSS.
I tried it with :before and :after but no success so far.
This will be used in a CMS, so i can not be sure how or where end user will be adding headings.

Answer 1

I think your best shot would be (since you cannot edit any of the HTML and you want a CSS only solution) to play a little with the position and z-index of the container and the h2:after pseudo element:
HTML:
<div id="wrapper">
<h2 class="heading">New Collection </h2>
</div>
CSS:
#wrapper {
width:100%;
height:800px;
background:green;
position:relative;
z-index:-2;
}
.heading {
display:inline;
background:green;
}
.heading:after {
content:'';
display:inline-block;
width:100%;
height:20px;
background:#d3d3d3;
position:absolute;
right:0;
z-index:-1;
}
Check this FIDDLE, I know it's not that fancy, but I think you cannot do more than that using CSS only.
Hope this helps.

Answer 2

The simplest way that I know of is to put a span inside of the H2, but still around the inner text, then apply one style to the span and one style to the H2.
EDIT: You can use a little bit of jQuery to add the span inside your H2 tags.
HTML:
<h2><span>New Collection</span></h2>
CSS:
h2 {
font-family: sans-serif;
font-weight: normal;
font-size: 16px;
background: #eee;
color: #999;
}
h2 span {
padding-right: 10px;
background: #fff;
}
jQuery:
$(document).ready(function() {
$('h2').each(function() {
var title = $(this).html();
$(this).html('<span>' + title + '</span>');
});
});
Here's a Demo