L'obtention d'arrière-plan pour être de la même largeur que le texte, mais de hauteur différente

Je suis en train d'essayer d'obtenir un certain regard en pure css (pas d'images).

Ce que j'ai est:

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

Je voudrais que le texte "titre" pour avoir un fond noir qui est de la même largeur que le texte, mais à une hauteur différente.

J'ai essayé c'est de différentes permutations: (ie. durée de la liaison, de la durée de l'h2, h2 affichage en direct et la durée d'un bloc)

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

Si je reçois la bonne largeur, je ne peux pas changer la hauteur parce que la durée est un élément inline. Si j'arrive à hauteur de droit en faisant la durée d'un bloc, je ne peux pas changer obtenir la largeur d'être exactement à la largeur du texte, car il est maintenant un élément de niveau bloc et s'étend à l'ensemble de la largeur de la page.

Toutes les idées, ou ai-je simplement utiliser une image?

pour ceux qui se demandent comment définir une blockquote largeur (qui aurait besoin d'ajustement sur la gauche de l'image) utilisez le display: block; overflow: hidden;

OriginalL'auteur Squadrons | 2012-07-12

  1. 1

    Appliquer position: relative; à la <a>, et position: absolute; à la .title-bg <span>. Définissez ensuite la top selon le cas, les left à 0, et la width et height appropriées.

    Quelque chose comme ceci: http://jsfiddle.net/minitech/3uzbV/

    OriginalL'auteur Ry-

  2. 2

    L'approche la plus simple que j'utilise est line-height.

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

    Voici un jsFiddle.

    OriginalL'auteur Brian Flanagan

  3. 0

    CSS:

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

    De l'essayer. Même les éléments en ligne peut avoir de remplissage.

    OriginalL'auteur Dpolehonski