Getting background to be same width as text, but different height
background-color, css
Solution
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/
Problem
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?