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

Question

I am trying to get a certain look in pure css (no images).

What I have is:

<h2>
    <a>TITLE</a>
</h2>

I would like for the text "title" to have a black background that is the same width as the text, but a different height.

I have tried this is various permutations: (ie. span in the link, span in the h2, h2 display inline and the span a block)

<h2 class="title section-title">
    <a href="<?php echo site_url(); ?>/artwork/illustrations" >
        Illustrations<span class="title-bg"></span>
    </a>
</h2>

If I get the width right, I can't change the height because the span is an inline element. If I get the height right by making the span a block, I can't change get the width to be exactly the width of the text because it is now a block level element and expands to be the entire width of the page.

Any ideas, or will I simply have to use an image?

Answer 1

Use display:inline-block;.

See this fiddle.

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

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