Comment augmenter l'écart entre le texte et le soulignement en CSS ?

Question

En utilisant le CSS, lorsque le texte a text-decoration:underline appliqué, est-il possible d'augmenter la distance entre le texte et le soulignement ?

Answer 1

Il existe d'excellentes solutions ici, mais chacune d'entre elles présente des problèmes. Le text-underline-offset est différent pour chaque navigateur. La réponse de squarecandy fonctionne également, mais elle est un peu compliquée. L'utilisation de la bordure inférieure modifie la disposition du texte et entraîne un décalage.

Une solution pour ajouter un soulignement personnalisé consiste à faire du soulignement une image d'arrière-plan, dont la taille est adaptée à celle du texte.

    a {
        /* Change the source image to account for changes to the text colour. It should be a single column. */
        background-image: url(data:image/png;base64,iVBORw__EDITED_OUT___0KGgYII=);
        /*background-image: url('underlineImage.png');*/
        background-size: 1px 1.1em;
        background-repeat: repeat-x;
        display: inline;
        cursor: pointer;
        text-decoration: none;
    }

Au fur et à mesure que le texte augmente, la position reste relative à la taille du texte. Avec cela, vous pouvez avoir l'image de soulignement que vous voulez, comme "une rangée d'étoiles", ou simplement une ligne.

L'exemple ci-dessus n'inclut pas les informations complètes en base64 pour créer l'effet. Cela fonctionne très bien sur tous les navigateurs, car il s'agit d'un élément fondamental et il est assez compatible avec les anciens navigateurs.

<a href="#">This _____ is the link</a>

Si l'image d'arrière-plan est un png avec transparence, elle fonctionne très bien au-dessus d'autres éléments.