Icons am Ende von Links einfügen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Hinter Links sollen je nach Funktion (E-Mail-Link, Suche etc.) entsprechende Icons gestellt werden, wie in folgender Abbildung gezeigt.

Link-Funktion wird durch nachgestellte Icons verdeutlicht

Abbildung: Die Funktion von Links wird durch nachgestellte Icons verdeutlicht.

Lösung

Versehen Sie die Links mit zwei Werten für das Attribut class. Der erste Wert, icon, besagt, dass dem Link ein Icon nachgestellt werden soll; der zweite Wert legt fest, welche Art von Icon dargestellt wird. In unserem Beispiel handelt es sich einmal um eine E-Mail-Adresse, das andere Mal um eine Suchmaschine:

<a href="mailto:orders@csscookbook.com" class="icon email">Quote me on an estimate</a>
<a href="http://www.google.com/" class="icon search">feline nolo</a>

Um für die Darstellung nach dem Link Platz zu schaffen, verwenden Sie einen Klassenselektor und die Pseudoklasse mit den Eigenschaften width, height und margin:

a {
 text-decoration: none;
 font-weight: bold;
}
#content a.icon:after {
 display: block;
 width: 17px;
 height: 15px;
 margin: 2px;
}

Anhand des zweiten Wertes für das Attribut class können wir die verschiedenen Arten von Links jetzt mit eigenen CSS-Regeln und dadurch mit eigenen Icons versehen.

Durch die Klassenselektoren .email und .search zusammen mit der Pseudoklasse :after können die Links durch die folgenden zwei CSS-Regeln mit den entsprechenden Icons versehen werden:

#content a.email:after {
 content: url(email.gif);
}
#content a.search:after {
 content: url(search.gif);
}

Diskussion

Das Konzept dieser Lösung ermöglicht es, das Design ohne großen Aufwand anzupassen und zu erweitern. Wollen Sie Links auf Word-Dokumente speziell hervorheben, bietet sich für das class-Attribut beispielsweise document als zweiter Wert an, wie hier gezeigt:

<a href="/_assets/report.pdf" class="icon document">feline nolo</a>

Jetzt können Sie die entsprechende CSS-Regel für das Icon definieren:

#content a.document:after {
 content: url(doc.gif);
}

Durch die Verwendung von Attributselektoren kommen Sie auch ohne den zusätzlichen Markup-Code im class-Attribut aus (siehe das Rezept Attribut-Selektoren):

#content a[href|="mailto"]:after {
 content: url(email.gif);
}

Allerdings ist die Unterstützung für Attributselektoren sehr begrenzt. Zudem verwendet diese Lösung die Eigenschaft content, die von Internet Explorer für Windows nicht unterstützt wird.

Siehe auch

Die Präsentation von Dave Shea zur Verwendung von Hintergrundbildern zum Einfügen von Icons nach Links und eine Erklärung, warum dieses Verfahren im Internet Explorer nicht funktioniert.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln