Changement de la couleur du soulignement

il y a maintenant une nouvelle propriété css3 pour ceci: texte-Décoration-Couleur

ainsi vous pouvez maintenant avoir du texte dans une couleur et un texte-décoration souligné - dans une couleur différente... sans avoir besoin d'un élément "wrap" supplémentaire

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>

Codepen

NB:

1) La prise en charge du navigateur est limitée pour le moment à Firefox et Chrome (entièrement pris en charge à partir de V57) et Safari

2) Vous pouvez également utiliser le texte-décoration shorthand propriété qui ressemble à ceci:

<text-decoration-line> || <text-decoration-style> || <text-decoration-color>

... donc en utilisant le raccourci text-decoration - l'exemple ci-dessus serait simplement:

p {
  text-decoration: underline red;
}

p {
  text-decoration: underline red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>

mise à jour de l'auteur:

cette réponse est périmée car texte-Décoration-Couleur est maintenant pris en charge par la plupart des navigateurs modernes.

---

:pseudo + em

afin de reproduire avec précision la taille, la largeur de la course et le positionnement de la text-decoration:underline sans introduire extra HTML markup , vous devez utiliser un pseudo-element avec em unités. Cela permet une mise à l'échelle précise de l'élément et du comportement natif sans markup supplémentaire.

CSS

`a {
  text-decoration: none;
  display: inline-table;
}

a:after {
  content: "";
  border-bottom: 0.1em solid #f00;
  display: table-caption;
  caption-side: bottom;
  position: relative;
  margin-top:-0.15em;
}`

en utilisant display: table-caption et caption-side sur le pseudo-élément et affichage inline-table , nous pouvons forcer le navigateur à aligner verticalement à la fois la ligne et le lien avec précision, même lorsqu'il est mis à l'échelle.

dans ce cas, nous utilisons inline-table au lieu de inline-block pour forcer le pseudo à s'afficher sans avoir besoin de spécifier la hauteur ou les valeurs négatives.

exemples

JSFIDDLE : https://jsfiddle.net/pohuski/8yfpjuod/8/

CODEPEN : http://codepen.io/pohuski/pen/vEzxPj / (example with scaling)

Testé Avec Succès Sur:

Internet Explorer: 8, 9, 10, 11

Firefox: 41, 40, 39, 38, 37, 36

Chrome: 45, 44, 43, 42

Safari: 8, 7, 6.2

Safari Mobile: 9.0, 8.0

Navigateur Android: 4.4, 2.3

Dolphin Mobile: 8, 11.4

dans la pratique, il est possible, si vous utilisez span élément au lieu de font :

<style>
u { color: black; }
.red { color: red }
</style>
<u><span class='red'><br>$username</span></u>

voir jsfiddle . Semble fonctionner sur Chrome, Safari, Firefox, IE, Opera (testé sur Win 7 avec les versions les plus récentes).

le code dans la question devrait fonctionner, aussi, mais il ne fonctionne pas pour une raison quelconque sur les navigateurs WebKit (Chrome, Safari).

Par le CSS : "Le couleur(s) requis pour la décoration de texte doit être dérivée de la "couleur" de la valeur de propriété de l'élément sur lequel 'text-decoration' est fixé. La couleur des décorations doit rester la même, même si les éléments descendants ont des valeurs de "couleur" différentes."

la façon la plus facile que j'ai abordé ce problème est avec CSS:

<style>
.redUnderline {
    color: #ff0000;
    border-bottom: 1px solid #000000;
}
</style>
<span class="redUnderline">$username</span>

Aussi, pour une réelle souligner, si votre article est un lien, cela fonctionne:

<style>
a.blackUnderline {
   color: #000000;
   text-decoration: underline;
}
.red {
    color: #ff0000;
}
</style>
<a href="" class="blackUnderline"><span class="red">$username</span></a>

vous pouvez également utiliser la propriété box-shadow pour simuler un soulignement.

voici un violon . L'idée est d'utiliser deux ombres de boîte superposées pour positionner la ligne au même endroit qu'un soulignement.

a.underline {
    text-decoration: none;
    box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 1), inset 0 -5px 0 0 rgba(255, 0, 0, 1);
}

une autre façon que celle décrite par danield est d'avoir un affichage de la largeur du conteneur enfant en ligne, et la couleur de la tipographie que vous voulez. La largeur de l'élément parent le texte-décoration, et la couleur de soulignement que vous voulez. Comme ceci:

div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div span{color:#000;display:inline}

<div>
  <span>Hover me, i can have many lines</span>
</div>

un pseudo-élément fonctionne mieux.

a, a:hover {
  position: relative;
  text-decoration: none;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  height: 0;
  top:90%;
  left: 0;
  right: 0;
  border-bottom: solid 1px red;
}

voir jsfiddle .

vous n'avez pas besoin d'éléments supplémentaires, vous pouvez le positionner aussi près ou aussi loin que vous le voulez à partir du texte( border-bottom est un peu loin à mon goût), il n'y a pas de couleurs supplémentaires qui apparaissent si votre lien est sur un fond de couleur différente (comme avec le box-shadow trick), et il fonctionne dans tous les navigateurs (texte-Décoration-Couleur seulement soutient Firefox encore).

possible inconvénient: le lien ne peut pas être position:statique, mais ce n'est probablement pas un problème la grande majorité du temps. Mettez-le en relation et tout va bien.

vous pouvez utiliser ce CSS pour "simuler" un soulignement:

text-decoration: none;
border-bottom: 1px solid #000;

vous pouvez envelopper votre <span> avec un <a> et utiliser ce petit plugin JQuery pour colorer le soulignement. Vous pouvez modifier la couleur en passant un paramètre du plugin.

    (function ($) {
        $.fn.useful = function (params) {

            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);

            this.wrap('<a></a>');
            var element = this.closest('a');
            element.css(aCSS);
            return element;
        };
    })(jQuery);

alors vous appelez en écrivant ceci:

    $("span.name").useful({color:'red'});

$(function () {

        var spanCSS = {
            'color' : '#000',
            'text-decoration': 'none'
        };
        
        $.fn.useful = function (params) {
            
            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);
            this.wrap('<a></a>');
            this.closest('a').css(aCSS);
        };

        // Use example:
        $("span.name").css(spanCSS).useful({color:'red'});



    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="container">

    <div class="user important">
        <span class="name">Bob</span>
        -
        <span class="location">Bali</span>
    </div>

    <div class="user">
        <span class="name">Dude</span>
        -
        <span class="location">Los Angeles</span>
    </div>


    <div class="user">
        <span class="name">Gérard</span>
        -
        <span class="location">Paris</span>
    </div>

</section>

ici, nous pouvons créer le soulignement avec la couleur dans le texte

<u style="text-decoration-color: red;">The color of the lines should now be red!</u>

ou

La couleur des lignes doit maintenant être rouge!

<h1 style=" text-decoration:underline; text-decoration-color: red;">The color of the lines should now be red!</u>

je pense que la façon la plus facile de faire ceci est dans votre css, utilisez:

text-decoration-color: red;

Cela va changer la couleur du soulignement sans changer la couleur de votre texte. Bonne chance!

Problème avec border-bottom est la distance supplémentaire entre le texte et la ligne. Le problème avec text-decoration-color est le manque de support du navigateur. Donc ma solution est l'utilisation d'une image de fond d'écran avec une ligne. Ceci supporte n'importe quel markup, couleur(s) et style de la ligne. top (12px dans mon exemple) dépend de line-height de votre texte.

 u {
    text-decoration: none;
    background: transparent url(blackline.png) repeat-x 0px 12px;
}