Farbe Unterstrich per CSS ändern
Andreas H.
- css
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?
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
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.
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.
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
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
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
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
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
Unglaublich, was dir alles einfällt - Hut ab!
Der Mann hat zu viel Freizeit.
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
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
Hallo suit,
Jein - man kann das a-Element auch in ein span-Element verfrachten (oder umgekehrt)
danke, wieder was gelernt!
Grüße
Richard