Andersfarbige Unterstreichung

Das fing schon damit an, dass die meist von Haus aus unterstrichen dargestellten Hyperlinks ziemlich eintönig mit immer derselben Farbe unterstrichen werden, mit der auch die Schrift dargestellt wird. Dabei geht es doch auch anders: berühr mich mit der Maus!

.links a { /* betriff alle Anker (in diesem Fall nicht nur Hyperlinks!), die sich innerhalb eines Elements der CSS-Klasse "links" befinden */
        text-decoration: none; /* das schaltet die normale Unterstreichung erstmal aus */
        display: inline; /* das gibt dem Element überhaupt erst einen Rahmen (=Border-Eigenschaft) ohne es aus dem Textfluss zu reißen*/
        border-bottom: 1px dotted #ccc; /* das gibt dem Element eine graue, gepunktete "Unterstreichung" */
}
.links a:hover {
        border-bottom: 1px solid #f00; /* und das gibt dem Element eine rote, durchgezogne "Unterstreichung", wenn es mit der Maus berührt wird */
}

Weil dieser Selektor vielleicht von anderen überschrieben werden soll(!), sollte diese Formatierung möglichst vor alle anderen Link-Dekorationen gestellt werden.

"Echte" Hyperlinks

Ein Anker-Element "<a>" wird erst dann ein "echter" Link, wenn es auch ein Attribut "href" mit einer Zieladresse hat. Das kann man inzwischen mit CSS prüfen und entsprechend darauf reagieren: www.example.com

.links a[href] {
        display: inline;
        padding-left: 1.5em;
        background: url("default0.png") left center no-repeat;
        background-size: contain;
}
.links a[href]:hover {
        background: url("default1.png") left center no-repeat;
}

Weil auch dieser Selektor vielleicht von anderen überschrieben werden soll(!), sollte diese Formatierung ebenfalls möglichst vor andere Link-Dekorationen gestellt werden.

Ab nach Hause ...

Auf so gut wie jeder Homepage gibt es ihn: diesen einen Link, mit dem man zurück auf die Startseite eines Internetauftritts gelangt. Meist ist er dekoriert mit einem kleinen Haus als Symbol für die oft auch "Homepage" genannte Startseite.

/ (ein einfacher Slash als Sprungmarke führt zurück zur obersten Verzeichnisebene einer Domain)

/absolut/index.php (absoluter Verweis auf eine Index-Datei)

../relative/index.asp (relativer Verweis auf eine Index-Datei)

.links a[href="/"],
.links a[href*="index."] { /* die Wichtigkeit des Punkts am Ende ist nicht zu unterschätzen! */
        display: inline;
        padding-left: 1.5em;
        background: url("home0.png") left center no-repeat;
        background-size: contain;
}
.links a[href*="index."]:hover {
        background: url("home1.png") left center no-repeat;
}

externe Links mit "http://"

http://www.example.com/ (Externe URL)

https://www.example.com/ (Externe URL, verschlüsselt)

... alle Links, deren Attribut "href" mit der Zeichenkette "http://" beginnt.

.links a[href^="http"] {
        display: inline;
        padding-left: 0;
        padding-right: 1.5em;
        background: url("external0.png") right center no-repeat;
        background-size: contain;
}
.links a[href^="http"]:hover {
        background: url("external1.png") right center no-repeat;
}

dokument-interne Links mit "#"

s.u. (zu einem #Anker im Dokument)

Alle Links, deren Attribut "href" mit dem "hashtag"-Zeichen ("#") beginnt ...

.links a[href^="#"] {
        display: inline;
        padding-left: 1.5em;
        background: url("anchor.png") left center no-repeat;
        background-size: contain;
}

... wird überschrieben für alle Links, deren Attribut "href" gleich "#top" ist.

Seitenanfang (zum #top-Anker des Dokuments)

.links a[href="#top"] {
        display: inline;
        padding-left: 0;
        padding-right: 1.5em;
        background: url("top0.png") right center no-repeat;
        background-size: contain;
}
.links a[href="#top"]:hover {
        background: url("top1.png") right center no-repeat;
}

Links, die in neuem Fenster geöffnet werden

.links a[target^="_blank"] { /* betrifft alle Links, die ein Attribut "target" mit dem Wert "_blank" haben */
        display: inline;
        padding-left: 0;
        padding-right: 1.5em;
        background: url("window0.png") right center no-repeat;
        background-size: contain;
}
.links a[target^="_blank"]:hover {
        background: url("window1.png") right center no-repeat;
}

new window

Files

.links a[href$=".pdf"] {
        display: inline;
        padding-left: 0;
        padding-right: 1.5em;
        background: url("pdf0.png") right center no-repeat;
        background-size: contain;
}
.links a[href$=".pdf"]:hover {
        background: url("pdf1.png") right center no-repeat;
}