Liquid width solution to link with 2 background images?

Liquid width solution to link with 2 background images?

I need to give a link background styling. As the width will vary I need to
use 2 images, which is why I have a span within my link.
Ive also needed to float the link left, which means I have to set
paragraphs to clear both.
My solution works but it seems like a lot of css and adding extra html
elements. Is there a more elegant solution?
http://jsfiddle.net/p9aXg/16/
<p>Here is some text Here is some text Here is some text Here is some text
Here is some text Here is some text Here is some text Here is some text
Here is some text Here is some text </p>
<a href="#" class="my-link"><span> This is a link sdafsdafsdaf </span>
</a>
<p>Here is some text Here is some text Here is some text Here is some text
Here is some text Here is some text Here is some text Here is some text
Here is some text Here is some text </p>
a {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg")
100% 50%;
line-height: 50px;
float: left;
}
a span {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg")
no-repeat;
height: 49px;
display: block;
padding-left: 20px;
padding-right: 40px;
}
p {
clear: both;
}