Links mit gepunktetem (dotted) Unterstrich

Hyperlink mit gepunktetem Unterstrich

Normalerweise werden Links durch einen Unterstrich gekennzeichnet. Der Unterstich lässt sich über die CSS-Eigenschaft text-decoration: none; deaktivieren; dann sollte der Link jedoch über eine farbliche Kennzeichnung verfügen, damit er als Link erkennbar ist.

a {
text-decoration: none;
color: #d75b05;
}

Anstelle der durchgezogenen Linie wirkt eine gepunktete Linie als Unterstrich dezenter. Die Kennzeichnung des Textes als Link ist jedoch eindeutig:

Link mit gepunktetem Unterstrich

Der Trick besteht darin, nicht die Eigenschaft text-decoration, die nur Über-, Durch- und Unterstrichung kennt - jeweils als durchgezogene Linie - zu benutzten, sondern die border-Eigenschaft mit der man über border-bottom die Art der Unterstreichung definieren kann. Als Linien-Stil (border-style) existiert solid (durchgezogen), double (Doppellinie), dashed (gestrichelt) und dotted (gepunktet). In CSS3 gibt es noch weitere Stile, die auf der Website von W3Schools in einer Vorschau gezeigt werden.

CSS:

a { text-decoration: none; color: #d75b05;}

a:link, a:visited {
    border-bottom: 1px dotted #d75b05;
}

a:active, a:focus, a:hover {
    border-bottom: 1px dotted #d75b05;
}

Ergänzend können dann noch die unterschiedlichen Zustände der Preudo-Elemente :link, :visited und :activ, :focus, :hover (wichtig ist die Reichenfolge der drei letzten Elemente) mit zwei Schriftfarben belegt werden:

CSS:

body {
    background: #aaa;
}

a {
    text-decoration: none;
    color: #fff;
    font-size: 25px;
}

a:link, a:visited {
    color: #fff;
    border-bottom: 1px dotted #fff;
}

a:active, a:focus, a:hover {
    color: #d75b05;
    border-bottom: 1px dotted #d75b05;
}

 

Kategorie

CSS