Weiches Unterstreichen

[kruk]

Hallo,
Ich sitze gerade an einem kleinen Problem. Und zwar möchte ich, dass die Links auf meiner Seite, wenn man mit der Maus über sie fährt, langsam unterstrichen werden. Das unterstreichen an sich ist kein Problem, aber ich möchte, dass die Unterstreichung nicht so schlagartig auftaucht, sondern etwas weicher aussieht.

Ich habe schon versucht das ganze mit einer Transition zu lösen:

CSS:

.links {
    text-decoration: none;
    transition: text-decoration .2s linear;
}

.links:hover {
    text-decoration: underline;
}

Das hat aber wie man sich denken kann nicht funktioniert, da es zwischen unterstrichen und nicht unterstrichen keinen Zwischenwert gibt.
Außerdem konnte ich keinerlei Attribute von text-decoration finden, die man zuverlässig verändern kann, wie bspw. die Farbe der Unterstreichung.

Mit border-bottom möchte ich nicht arbeiten, da dieser Rahmen immer sehr weit unter dem Text ist.

Dankeschön für jede Mithilfe

 

[threadi]

Das kriegst Du nur mit border hin. Die Entfernung vom border ergibt sich aus der Zeilenhöhe und evtl. vorhandenen zusätzlichen Abständen. Wenn Du die entfernst und die Zeilenhöhe verringerst (dadurch werden die Buchstaben i.d.R. nicht verkürzt) sollte es auch so aussehen und wirken können wie Du willst.

Noch als Tipp: http://www.htmldog.com/techniques/underlines/

 

[kruk]

Danke, funktioniert so wie gewünscht :)

.links {
    text-decoration: none;
    color: #444;
    display: inline-block;
    line-height: 11px;
    border-bottom: 1px solid;
    border-color: #FFF;

    -webkit-transition: border-color .2s linear;
    -moz-transition: border-color .2s linear;
    -ms-transition: border-color .2s linear;
    -o-transition: border-color .2s linear;
    transition: border-color .2s linear;
}

.links:hover {
    border-color: #444;
}