Automatisch icoontjes toevoegen aan links via CSS zonder class

Voorbeelden van iconsIcoontjes toevoegen aan links ziet er mooi uit en het is handig voor bezoekers die zien wat voor soort link het betreft, bijvoorbeeld een externe link, een PDF- of Word-bestand.

Dit kan door de link een class met een achtergrondafbeelding mee te geven.

HTML:
<a href="http://www.externelink.nl" class="extern">externe link</a>

CSS:
a.extern {
  padding-right: 15px;
  background: url(images/icon-link.gif) no-repeat center right;
}

Maar het kan ook automatisch, zonder toevoeging van een class.

In onderstaand voorbeeld ga ik uit van de website mijnwebsite.nl. Aan alle links wordt standaard een achtergondafbeelding voor een externe link gegeven.
Daarna wordt bij alle interne links (die beginnen met http://mijnwebsite of http://www.mijnwebsite of een interne link zijn) de achtergrondafbeelding verwijderd. Naar keuze kun je nu afbeeldingen toevoegen voor mail-links, of links naar PDF-, ODT, Word of bestanden met andere extensies.
De padding is afhankelijk van de grootte van de achtergrondafbeelding.

a { 
  padding-right: 15px; 
  background: url(images/icon-link.gif) no-repeat center right; 
}

a[href^="http://mijnwebsite"] { 
  padding-right: 0; 
  background: none;
}
a[href^="http://www.mijnwebsite"] { 
  padding-right: 0; 
  background: none; 
}
a[href^="#"] { 
  padding-right: 0; 
  background: none; 
}
a[href^="mailto"] { 
  padding-right: 15px; 
  background: url(images/icon-mail.gif) no-repeat center right; 
}
a[href$='.pdf'] { 
  padding-right: 15px; 
  background: url(images/icon_pdf.gif) no-repeat center right; 
}
a[href$='.PDF'] { 
  padding-right: 15px; background: url(images/icon_pdf.gif) no-repeat center right; 
}
a[href$='.doc'] { 
  padding-right: 15px; 
  background: url(images/icon_pdf.gif) no-repeat center right; 
}
a[href$='.DOC'] { 
  padding-right: 15px; 
  background: url(images/icon_pdf.gif) no-repeat center right; 
}

See it in action op iacobien.nl

Advertisements

Author: Rian Rietveld

WordPress Engineer focussing on accessibility

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s