Farbe Unterstrich per CSS ändern

[Andreas H.]

Guten Abend,

ein Link ist ja defaultmäßig unterstrichen. Ich würde gerne die Farbe des Unterstrichs verändern. Wie geht das denn per CSS?

[Richard]

Hallo Andreas,

die Farbe der Unterstreichung allein kannst du nicht ändern. Du kannst aber einen ähnlichen Effekt mit Rahmen, deren Farbe du über border-color modifizierst, erreichen.

Grüße
Richard

[suit]

die Farbe der Unterstreichung allein kannst du nicht ändern. Du kannst aber einen ähnlichen Effekt mit Rahmen, deren Farbe du über border-color modifizierst, erreichen.

Jein - man kann das a-Element auch in ein span-Element verfrachten (oder umgekehrt) und unterschiedliche Schriftfarben verwenden um einen entsprechenden Effekt zu erzielen. Mit CSS3 wird das wohl auch mit ::outside funktionieren, ohne dass man ein zusätzliches Element einfügen muss.

[suit]

die Farbe der Unterstreichung allein kannst du nicht ändern. Du kannst aber einen ähnlichen Effekt mit Rahmen, deren Farbe du über border-color modifizierst, erreichen.

Jein - man kann das a-Element auch in ein span-Element verfrachten (oder umgekehrt) und unterschiedliche Schriftfarben verwenden um einen entsprechenden Effekt zu erzielen. Mit CSS3 wird das wohl auch mit ::outside funktionieren, ohne dass man ein zusätzliches Element einfügen muss.

Nachtrag:

<span><a href="http://example.com">baz</a></span>

span {  
	text-decoration: underline;  
	color: green;  
}  
  
a {  
	text-decoration: none;  
	color: red;  
}  
  
span:hover {  
	color: red;  
}  
  
a:hover {  
	color: green;  
}

oder

<a href="http://example.com">baz</a>

a::outside {  
	text-decoration: underline;  
	color: green;  
}  
  
a {  
	text-decoration: none;  
	color: red;  
}  
  
a:hover::outside {  
	color: red;  
}  
  
a:hover {  
	color: green;  
}

Beides nicht getestet.

[Ulysses]

Hi!

Jein - man kann das a-Element auch in ein span-Element verfrachten (oder umgekehrt) und unterschiedliche Schriftfarben verwenden um einen entsprechenden Effekt zu erzielen...

Nachtrag:

<span><a href="http://example.com">baz</a></span>

span {

text-decoration: underline;
color: green;
}

a {
text-decoration: none;
color: red;
}

span:hover {
color: red;
}

a:hover {
color: green;
}

AFAIK spielen da zumindest der IE6 und 7 aber nicht mit...  
FG Ulysses

[ChrisB]

Hi,

<span><a href="http://example.com">baz</a></span>

span:hover {
color: red;

AFAIK spielen da zumindest der IE6 und 7 aber nicht mit...

IE 7 kann's sehr wohl, und IE 6 ist tot (kann aber von Nekrophilen in diesem Falle auch befriedigt werden, in dem man das ganze andersherum schachtelt.)

MfG ChrisB

[Ulysses]

Hi!

Hi,

<span><a href="http://example.com">baz</a></span>

span:hover {
color: red;

AFAIK spielen da zumindest der IE6 und 7 aber nicht mit...

IE 7 kann's sehr wohl,...

Was kann der IE7? Die Pseudoklasse :hover auf andere als das a-Element anwenden? Ja das schon, aber darum ging es hier ja nicht.
Den Link unterstreichen weder 6er noch 7er.

und IE 6 ist tot

dein Wort in Gottes Ohr!
FG Ulysses

[ChrisB]

Hi,

Was kann der IE7? Die Pseudoklasse :hover auf andere als das a-Element anwenden? Ja das schon, aber darum ging es hier ja nicht.

Ich ging davon aus, dass du darauf anspieltest.

Den Link unterstreichen weder 6er noch 7er.

Interessant, war mir nicht bewusst, dass ältere IE dabei Probleme machen.
Komischerweise offenbar nur bei Links - wenn ich zwei andere Elemente ineinander verschachtele, tritt bei denen das Problem nicht auf.

Lässt sich aber auch fixen, in dem man die Verschachtelung umdreht, und zusätzlich dem Link noch Layout gibt:

span {  
   color:red;  
}  
a {  
   text-decoration:underline;  
   color:green;  
   height:1%;  
}  
a:hover {  
   color:red;  
}  
a:hover span {  
   color:green;  
}  

<a href="http://example.com"><span>baz<span></a>

MfG ChrisB

[Ulysses]

Hi!

Lässt sich aber auch fixen, in dem man die Verschachtelung umdreht, und zusätzlich dem Link noch Layout gibt:

Unglaublich, was dir alles einfällt - Hut ab!

FG Ulysses

[suit]

Unglaublich, was dir alles einfällt - Hut ab!

Der Mann hat zu viel Freizeit.

[Patrick Andrieu]

Hallo suit!

Unglaublich, was dir alles einfällt - Hut ab!
Der Mann hat zu viel Freizeit.

Oder einen Job mit viel (Narren-)Freiheit ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Ulysses]

Hi!

Der Mann hat zu viel Freizeit.

Das ausgerechnet DU das sagst - ich hätte dich auch zu den fleißigen Top 10 im Forum gezählt ;-)

FG Ulysses

[Richard]

Hallo suit,

Jein - man kann das a-Element auch in ein span-Element verfrachten (oder umgekehrt)

danke, wieder was gelernt!

Grüße
Richard