Geek asks and answers

Getting the background for the same width as the text, but with different heights

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

I have:

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

I would like the title text to have a black background with the same width as the text, but with a different height.

I tried this various permutations: (i.e. span in the link, range in h2, h2 displays the line and block 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 to the right, I cannot change the height because the span is an inline element. If I get the height on the right by making the block a block, I cannot change the width of the width of the text, since it is now a block level element and expands to be the entire width of the page.

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

+5
source share
4

position: relative; <a> position: absolute; .title-bg <span>. top, , left - 0 width height, .

- : http://jsfiddle.net/minitech/3uzbV/

+1

display:inline-block;.

.

HTML:

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

CSS

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

The easiest approach I use is line-height.

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

Here is jsFiddle .

+2
source

CSS

a {
    font-size:1em;
    padding:1em 0 1em 0;/*set top and bottom padding to make up extra height*/
    background-color:#063;
}

Try it. Even inline elements can be indented.

0
source

More articles:


All Articles