I've got a page that shows my photography portfolio. I'm trying to do a jquery gradient on the text, and it's working on all but the first link. Here's the html:

<h1><a href="portfolio/engagements"><span></span>engagements</a>  | </h1><br>
<h1><a href="portfolio/weddings"><span></span>weddings</a>  |  </h1>    <br>
<h1><a href="portfolio/bridals"><span></span>bridals</a>  |  </h1>  <br>
<h1><a href="portfolio/families"><span></span>families</a>  |  </h1>    <br>
<h1><a href="portfolio/seniors"><span></span>seniors</a>  </h1>     <br>

And here's the jquery call:

$(".jquery h1").prepend("<span></span>");

And here's the css for it:

.gradient4 span {
    background: url(images/gradient-dark.png) repeat-x;
    position: absolute;
    bottom: -0.1em;
    display: inline;
    width: 100%;
    height: 29px;
}

The problem I'm having is that all urls but the first link (currently 'engagements'), have the gradient effect. Any ideas why the first link isn't working?