Getting background to be same width as text, but different height

Apply position: relative; to the <a>, and position: absolute; to the .title-bg <span>. Then set the top as appropriate, the left to 0, and the width and height as appropriate.

Something like this: http://jsfiddle.net/minitech/3uzbV/

The simplest approach I use is line-height.

h2 a {color:#fff; line-height:40px; display:inline-block; background:#333;}​

Here's a jsFiddle.

Use display:inline-block;.

See this fiddle.

h2 {
    display:inline-block;
    height:60px;
    background-color:blue;
    color:white;
}

<h2><a>Hello.</a></h2>