Unterstrich in anderer Farbe als Text

[Konrad L. M. Rudolph]

Moin,

wie ist es möglich, einen Text in einer Farbe zu unterstreichen, die sich von der Textfarbe unterscheidet?

Irgendwie muss es gehen, wie man z.B. auf der Seite http://madrat.net/tmp/lalelu.html sehen kann. Sobald ich allerdings den <a>-Tag durch einen <span> ersetze, funktioniert es nicht mehr: http://madrat.net/tmp/lalelu2.html.

Weiß jemand Rat?

Gruß,
KonRad -

[chlori]

Hi

wie ist es möglich, einen Text in einer Farbe zu
unterstreichen, die sich von der Textfarbe unterscheidet?

Müsste eigentlich klappen, nicht?

HTML:
p {color: Black;text-decoration: underline;}
p span {color: Red;}

CSS:
<p>Hello, <span>Hello, world!</span></p>

Gruss
chlori

[siro]

Hallo.

Klappt auch.
Das Problem ist, dass er beim zweiten Beispiel beiden Spans einen Unterstrich verpasst hat.
Eine ID im ersten span und der entsprechende Bezug darauf im CSS können das lösen.
Eine andere Möglichkeit ist, beim zweiten noch "text-decoration: none;" hinzuzufügen.

MfG _Siro

[Konrad L. M. Rudolph]

Moin,

Eine andere Möglichkeit ist, beim zweiten noch "text-decoration: none;" hinzuzufügen.

Ja, das klappt wunderbar -- auch mit zwei <span>s. Na, zumindest im Mozilla und Opera. Der MSIE zeigt -- so wie ich das eigentlich erwartet hätte -- für den verschachtelten <span> dann keinen Unterstrich an.

Trotzdem vielen Dank. Problem erledigt.

Gruß,
KonRad -

[Konrad L. M. Rudolph]

Moin,

Müsste eigentlich klappen, nicht?

HTML:
p {color: Black;text-decoration: underline;}
p span {color: Red;}

CSS:
<p>Hello, <span>Hello, world!</span></p>

Danke, so klappt es in der Tat -- auch wenn ich Dein CSS und HTML umgekehrt habe ;-) -- scheint also nur nicht zu funktionieren, wenn man zwei span-Elemente ineinander packt.

Das ist allerdings ein wenig doof, denn eigentlich bräuchte ich genau das. Na, egal.

Gruß,
KonRad -

[Cheatah]

Hi,

scheint also nur nicht zu funktionieren, wenn man zwei span-Elemente ineinander packt.

dann stimmen Deine Selektoren nicht.

Cheatah

[Konrad L. M. Rudolph]

Moin,

scheint also nur nicht zu funktionieren, wenn man zwei span-Elemente ineinander packt.

dann stimmen Deine Selektoren nicht.

Hmm. Ich habe einen Link gepostet, http://madrat.net/tmp/lalelu2.html, da kannst Du das nachempfinden. IMHO stimmen die Selektoren da:

CSS:
span { color: Black; text-decoration: underline; }
span span { color: Red; }

HTML:
<p><span>Hello, <span>world!</span></span></p>

-- ist ja aber auch wurscht, wenn man für den zweiten <span> 'text-decoration: none' einstellt, geht es ja.

Gruß,
KonRad -

[siro]

Das Problem ist, dass sich der Selektor "span" auf beide spans bezieht und somit beide einen Unterstrich bekommen.
Schöner ist es natürlich durch eine Klasse oder eine ID nur dem äußeren Span einen Unterstrich zu geben, anstatt es danach zu überschreiben.
Das versteht dann auch der IE ab Version 5.5 und der IE 5.00 macht zumindest einen (zweifarbigen) Unterstrich.

MfG _Siro

[Schuer]

Hallo,

wie ist es möglich, einen Text in einer Farbe zu unterstreichen, die sich von der Textfarbe unterscheidet?

border-bottom:1px solid #123456;

Gruß,
_Dirk

[Tim Tepaße]

Hallo Konrad,

wie ist es möglich, einen Text in einer Farbe zu unterstreichen, die sich
von der Textfarbe unterscheidet?

In Zukunft wird das auch mit CSS möglich sein:
http://www.w3.org/TR/css3-text/#text-decoration-color

Bis dahin bleiben die im Thread vorgeschlagenen Lösungen die praktikableren,
wobei ich persönlich die Variante mit border-bottom der Variante mit <span>
vorziehen würde. Ein Rahmen ist zwar kein wirklicher Unterstrich, mich würden
die zusätzliche Konstruktion aber sehr viel mehr stören.

Tim