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

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/