Here’s the effect I’m trying to accomplish: http://cl.ly/CEBs
The background on “Read More” is extending out on both sides, but not behind the actual text.
Looks pretty simple right? In fact I’ve got it working with pseudo-elements, but the only problem is that my current implementation requires a fixed width header and an additional span element. Here’s what my markup looks like:
Read More
And here’s my CSS:
h3{
overflow:hidden;
position:relative;
height:21px;
}
h3 span{
display:block;
position:absolute;
left:50%;
margin-left:-70px;
}
h3 span:before, h3 span:after{
background: url("bg.png");
content:" ";
display:block;
height:14px;
right:100%;
width:200px;
position:absolute;
top:4px;
}
h3 span:after{
left:100%;
}
As you can see, my code requires that the inner span element have a fixed width, which is not very practical. Any way to do this with unknown width elements, and optionally without the extra span?
