Farbe der Unterstreichung ändern

Ich habe diesen Code hier:

echo "<u><font color="red"><br>$username</font></u>";

Erstens ist es, wie Sie sehen können, unterstrichen (< u >). Zweitens ist der gesamte Text rot. Nun, gibt es trotzdem den Text ($username) rot zu lassen, aber die Unterstreichung schwarz?

Dafür gibt es jetzt eine neue CSS3-Eigenschaft: Text-Dekoration-Farbe

So können Sie jetzt Text in einer Farbe und eine Textdekoration unterstreichen – in einer anderen Farbe … ohne ein zusätzliches „Wrap“-Element zu benötigen

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>

Codestift

Hinweis:

1) Browser-Unterstützung ist derzeit auf Firefox und Chrome (ab V57 voll unterstützt) und Safari beschränkt

2) Sie könnten auch die verwenden Textdekoration Kurzschrift-Eigenschaft, die so aussieht:

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

… also mit der text-decoration Kurzschrift – das obige Beispiel wäre einfach:

p {
  text-decoration: underline red;
}

p {
  text-decoration: underline red;
}

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

Update vom Autor:

Diese Antwort ist seitdem veraltet Text-Dekoration-Farbe wird jetzt von den meisten modernen Browsern unterstützt.

:pseudo+em

Um die Größe, Strichbreite und Positionierung des Originals genau zu replizieren text-decoration:underline ohne zusätzliches HTML-Markup einzuführensollten Sie a verwenden pseudo-element mit em Einheiten. Dies ermöglicht eine genaue Skalierung des Elements und natives Verhalten ohne zusätzliches Markup.

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;
}`

Durch die Verwendung von Anzeige:table-caption und caption-side auf dem Pseudo-Element und Display inline-tablekönnen wir den Browser zwingen, sowohl die Linie als auch den Link genau vertikal auszurichten, selbst wenn er skaliert ist.

In diesem Fall verwenden wir inline-table anstelle von inline-block, um die Anzeige des Pseudos zu erzwingen, ohne dass Höhen oder negative Werte angegeben werden müssen.

Beispiele

JSFIDDLE: https://jsfiddle.net/pohuski/8yfpjuod/8/
CODEPEN: http://codepen.io/pohuski/pen/vEzxPj | (Beispiel mit Skalierung)

Erfolgreich getestet am:

Internet-Explorer: 8, 9, 10, 11
Firefox: 41, 40, 39, 38, 37, 36
Chrom: 45, 44, 43, 42
Safari: 8, 7, 6.2
Mobile Safari: 9.0, 8.0
Android-Browser: 4.4, 2.3
Delphin-Mobil: 8, 11.4

Nein. Das Beste, was Sie tun können, ist, a zu verwenden border-bottom mit einer anderen Farbe, aber das ist es nicht Ja wirklich unterstreichen.

In der Praxis ist es möglich, wenn Sie verwenden span Element statt font:

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

Sehen jsfiddle. Scheint auf Chrome, Safari, Firefox, IE, Opera zu funktionieren (getestet auf Win 7 mit den neuesten Versionen).

Der Code in der Frage sollte auch funktionieren, funktioniert aber aus irgendeinem Grund nicht in WebKit-Browsern (Chrome, Safari).

Bis zum CSS-Spezifikation: „Die für die Textdekoration erforderliche(n) Farbe(n) muss/müssen vom Eigenschaftswert ‘color’ des Elements abgeleitet werden, auf das ‘text-decoration’ gesetzt ist. Die Farbe von Dekorationen muss gleich bleiben, auch wenn untergeordnete Elemente unterschiedliche „Farbwerte“ haben.“

Am einfachsten habe ich das mit CSS gelöst:

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

Auch für eine tatsächliche Unterstreichung, wenn Ihr Element ein Link ist, funktioniert dies:

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

Sie können auch die Eigenschaft box-shadow verwenden, um eine Unterstreichung zu simulieren.

Hier ist ein Geige. Die Idee ist, zwei geschichtete Kastenschatten zu verwenden, um die Linie an der gleichen Stelle wie eine Unterstreichung zu positionieren.

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);
}

Eine andere Möglichkeit als die von Danield beschriebene besteht darin, die Breite eines untergeordneten Containers inline anzuzeigen und die gewünschte Tipografiefarbe anzuzeigen. Das übergeordnete Element Breite die Textdekoration und die Farbe der gewünschten Unterstreichung. So was:

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>