Changer la couleur de soulignement
J'ai ce code ici:
echo "<u><font color='red'><br>$username</font></u>";
Tout d’abord, comme vous pouvez le constater, c’est souligné (<u>). Deuxièmement, tout le texte est tout rouge. Bon, est-il possible de laisser le texte ($ username) rouge mais le soulignement noir?
Le mieux que vous puissiez faire est d'utiliser un border-bottom avec une couleur différente, mais ce n'est pas vraiment vraiment souligné.
Il existe maintenant une nouvelle propriété css3 pour ceci: text-decoration-color
Ainsi, vous pouvez maintenant avoir du texte d'une seule couleur et un soulignement de décoration de texte - dans une couleur différente ... sans avoir besoin d'un élément supplémentaire "envelopper"
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) Prise en charge du navigateur est actuellement limitée à Firefox et Chrome (entièrement prise en charge à partir de la V57) et à Safari
2) Vous pouvez aussi utiliser la propriété text-decoration shorthand qui ressemble à ceci:
<text-decoration-line> || <text-decoration-style> || <text-decoration-color>
... pour utiliser 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 obsolète car text-decoration-color est maintenant supporté par la plupart des navigateurs modernes.
: pseudo + em
Afin de reproduire avec précision la taille, la largeur de trait et le positionnement du caractère natif text-decoration:underlinesans introduire de balise HTML supplémentaire, 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 marquage 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 display inline-table , nous pouvons forcer le navigateur à aligner verticalement les lignes et les liens, même lorsqu'ils sont redimensionnés.
Dans ce cas, nous utilisons inline-table au lieu de inline-block pour forcer le pseudo à s'afficher sans qu'il soit nécessaire de spécifier une hauteur ou des valeurs négatives .
Exemples
JSFIDDLE: https://jsfiddle.net/pohuski/8yfpjuod/8/
CODEPEN: http://codepen.io/pohuski/pen/vEzxPj | (exemple avec mise à l'échelle)
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
Mobile Safari: 9.0, 8.0
Navigateur Android: 4.4, 2.3
Dolphin Mobile: 8, 11,4
En pratique, il est possible, si vous utilisez l'élément span au lieu de font:
<style>
u { color: black; }
.red { color: red }
</style>
<u><span class='red'><br>$username</span></u>
Voir jsfiddle . Il semble fonctionner sur Chrome, Safari, Firefox, IE, Opera (testé sur Windows 7 avec les versions les plus récentes).
Le code de la question devrait également fonctionner, mais il ne fonctionne pas pour une raison quelconque sur les navigateurs WebKit (Chrome, Safari).
Par la spécification CSS : “La ou les couleurs requises pour la décoration du texte doivent être dérivées de la valeur de la propriété 'couleur' de l'élément sur lequel est définie la 'décoration du texte'. La couleur des décorations doit rester la même, même si les éléments descendants ont des valeurs de "couleur" différentes. ”
Le moyen le plus simple de résoudre ce problème est avec CSS:
<style>
.redUnderline {
color: #ff0000;
border-bottom: 1px solid #000000;
}
</style>
<span class="redUnderline">$username</span>
En outre, pour un soulignement réel, si votre élément 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 décrite par danield est d’afficher en ligne la largeur du conteneur enfant et la couleur de tipographie de votre choix. La largeur de l'élément parent, la décoration du texte et la couleur de soulignement souhaitée. Comme ça:
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 plus loin que vous le souhaitez à partir du texte (border-bottom est un peu loin à mon goût), aucune couleur supplémentaire n'apparaît si votre lien est terminé. un fond de couleur différente (comme avec l'astuce Box-Shadow), et cela fonctionne dans tous les navigateurs (text-decoration-color ne supporte que Firefox pour l'instant).
Inconvénient possible: le lien ne peut pas être positionné: statique, mais ce n'est probablement pas un problème la grande majorité du temps. Réglez-le simplement sur relatif et tout va bien.
ici, nous pouvons créer un 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 devrait maintenant être rouge!
<h1 style=" text-decoration:underline; text-decoration-color: red;">The color of the lines should now be red!</u>Vous pouvez envelopper votre <span> avec un <a> et utiliser ce petit plugin JQuery pour colorer le soulignement . Vous pouvez modifier la couleur en transmettant un paramètre au 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);
Ensuite, 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>Je pense que le moyen le plus simple de le faire est dans votre css, utilisez:
text-decoration-color: red;
Cela changera la couleur du soulignement sans changer la couleur de votre texte. Bonne chance!
Vous pouvez utiliser ce CSS pour "simuler" un soulignement:
text-decoration: none;
border-bottom: 1px solid #000;
Le meilleur moyen que je connaisse est le suivant:
HTML5:
<p>Initial Colors <a id="new-color">Different Colors</a></p>
CSS3:
p {
color: #000000;
text-decoration-line: underline;
text-decoration-color: #a11015;
}
p #new-color{
color: #a11015;
text-decoration-line: underline;
text-decoration-color: #000000;
}
Le 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 prise en charge du navigateur. Par conséquent, ma solution consiste à utiliser une image d'arrière-plan avec une ligne. Cela prend en charge tous les balises, couleurs et styles 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;
}