Understregning med anden farve end teksten

Du kan vel bare sætte det som border-bottom i stedet.

Dvs. border-bottom:1px solid #f00;

Og så skal normale links nok bare have transparent i stedet for #f00 for ikke at hoppe.

Der er dog forskel på border-bottom og text-decoration: underline.

Jeg har svaret på et lignende spørgsmål: http://www.eksperten.dk/spm/823899

Okay.

Vil du ikke uddybe din sidste sætning? Jeg er ikke helt med.

  // Steeven

Ja, hvis der ikke var forskel, ville det jo ikke løse det. :)

Hvad er du i tvivl om, Steeven?

Min løsning kræver eksempelvis en <span> inde i dine links. Hvis dette er for besværligt eller ikke kan lade sig gøre, er det nok bedst med den løsning som w13 foreslår.

Det w13 mener er:

a { border-bottom: 1px solid transparent; text-decoration: none; }
a:hover { border-bottom-color: #F00; }

Så der vil altså være en usynlig border-bottom når musen ikke er over linket. Når musen placeres over linket, altså ved :hover, farves border-bottom rødt.

Jeg mente: Hvad mener du med "for ikke at hoppe"? Vil teksten da ellers "hoppe"?


  // Steeven

Ja, hvis den pludselig får en kant på forneden, vil den nok rykke sig lidt i nogle browsere. Derfor lægger vi en transparent kant på fra start.

Okay, jeg forstår.

Jeg har forsøgt mig frem med <span>-tags omkring linksene, og det virker fint - i alle andre browsere end Internet Explorer 7.0 ?!
I Firefox, Opera, Apple Safari og Google Chrome fremkommer den røde understregning ved musen over linket som den skaæ, men IKKE i IE.


Jeg har skrevet følgende i min CSS:

span:hover {
    color: #CC6666;
    text-decoration: underline;
}
a:link {
    color: #333333;
    text-decoration: none;
}

Jeg er nød til at skrive "text-decoration: none;" under a:link, for at fjerne den generelle understregning af links.

Hvorfor virker det nu ikke i IE?

  // Steeven

Så vidt jeg husker, tillades :hover kun på a-tags i IE.

Du kan jo prøve at lægge dette på din span som eksperiment:

onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'"

Hvis det virker med dét, er den gal med :hover.

Derfor foretrækker jeg personligt border-bottom-metoden, da der derudover også spares både CSS- og markup-kode. =)

Ja det er korrekt, som w13 siger, at IE kun forstår :hover på a-tags. Der kan du bytte om på <span> og <a>:

HTML:
<a href="#"><span>Min understregning er rød!</span></a>

CSS:
a { color: #000; text-decoration: underline; }
a:hover { color: #F00; }
a span { color: #000 }

Okey, jeg forsøger... Vender tilbage lige straks.

Jeg vil lige spørge om en enkelt ting. Hvad angiver det, at man skriver:
a span { color: #000 }  ?

betyder "a span" blot et span-element, der befinder sig mellem a-tags?

  // Steeven

Ja, det er et span-element, der er et såkaldt "barn" af et a-tag. Så det kan godt være sådan her:

<a><b><i><span></span></i></b></a>

Okay. Tak for det.

Jeg har ikke forsøgt med den sidstnævnte metode med <span>-elementer alligevel, for jeg fik det til at fungere med border-bottom. Nu passer det helt perfekt - det gør ikke noget, at understregning er lidt længere under teksten end ellers.

Tusind tak for hjælpen. Jeg er nået frem til en glimrende løsning.
Læg meget gerne et svar begge to.

  // Steeven

Her er et svar. =)

Hvis du mindsker padding og sørger for at øge margin med det samme antal px, så kan du flytte understregningen op, så det ligner en normal understregning. =)

OK, så er det problem også løst :) Tak for det.

  // Steeven

Et svar fra mig.

Pointene er uddelt og tråden er afsluttet.

Mange tak for hjælpen.

  // Steeven

Tak for points! :)