CSS3: Ein Beispiel für die attr() Funktion

Posted by & filed under css, dev.

Mit der attr() Funktion ist es möglich, Attribute eines Elements in CSS auszulesen.
Das kann zum Beispiel verwendet werden, um in der Druckansicht der Seite die vollständigen Links anzuzeigen.Das sollte dann so aussehen:
Im Browser: Linkbeschreibung
Auf dem Papier: Linkbeschreibung (http://michael.josi.de)

Der Effekt lässt sich relativ einfach mittels CSS3 erreichen:

@media print {
  a::after {
    content: ' (' attr(href) ') ';
  }
}

Eventuell existierende lokale Verweise (die, die mit # Anfangen) sollten davon natürlich ausgenommen werden, dafür existiert noch ein ’not‘:

a:not([href^='#'])::after {
  content: ' (' attr(href) ') ';
}

Natürlich kann man den Content noch weiter aufhübschen, unterschiedliche Farben verpassen etc. und natürlich wird das auch nicht im IE7 funktionieren!

Leave a Reply