005 Icoon na externe links (+ fancy ‘underline’ met andere kleur) – CSS

• ← vorige
• terug naar inspiratie

Interne + externe links verschillend stylen

Ik kreeg laatst de vraag hoe je ervoor zorgt dat alle externe links een icoontje mee krijgen, zoals bijvoorbeeld Wikipedia dat doet.

Dan krijg je dus het volgende:

interne link

externe link

Hieronder vind je de CSS code!

Vervang siteurl.com met jouw eigen domein en link de background url naar jouw eigen icoon.

a[href*="//"]:not([href*="siteurl.com"]):after {
    display: inline-block;
    content: ' ';
    height: 18px;
    width: 18px;
    background-size: cover !important;
    margin: 0 8px;
    background: url(/wp-content/uploads/2020/04/icon.png);
}

Attribution: External Link icon icon by Icons8

Underlines vs. box-shadow: fancy underline met eigen kleur 🙂

link met standaard underline

link met box-shadow onderlijning

externe link met box-shadow onderlijning

Om links een underline te geven, gebruik je over het algemeen:

a {
    text-decoration: underline;
}

Werkt super, maar deze underline kun je geen kleur meegeven. Wil je wel een andere kleur underline dan je link kleur, gebruik dan box-shadow!

a {
    text-decoration: none;
    box-shadow: inset 0 -1.5px 0 #F287B7;
}

• ← vorige
• terug naar inspiratie