Absolute element inheriting relative parent div's width

Question

I am trying to position a gradient over an inline / inline-block anchor link, and have that gradient inherit the width of that parent anchor. The problem is that the span either inherits the entire width of the anchor's parent, or just the width of the  . I am unable to get the span element to properly inherit the width while maintaining the anchors inline display.

CSS

a { width: auto; display: inline-block; }

a span { background: url(../images/fade_h1.png); width: 100%; height: 12px; position: absolute; display: block; z-index: 3; }

HTML

<a href="index.php"><span>&nbsp;</span>Index</a>

Answer 1

Can't be done with position: absolute as far as I can see.

I'm not sure whether this will serve you, but how about giving the a position: relative and the a span

left: 0px;
right: 0px;
top: 0px;
bottom: 0px;

?