Externe link stylen - ILUZIE inspiratie blog

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

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;
}

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Misschien vind je dit ook interessant:

Mijn website gebruikt een aantal cookies. Je kunt ervoor kiezen om ze te accepteren, of om ze te weigeren:

Cookie instellingen

Hieronder kun je kiezen welke cookies je wilt toestaan op deze website. Klik op 'Cookie instellingen opslaan' om je keuze toe te passen.

FunctioneelMijn website gebruikt functionele cookies. Deze zijn noodzakelijk om de website te laten werken.

AnalytischMijn website gebruikt (geanonimiseerde) analytische cookies, deze maken het mij mogelijk om het websitegedrag van bezoekers te analyseren en op basis hiervan mijn website te verbeteren.

Social mediaMijn website maakt gebruik van Vimeo, zodat ik filmpjes kan embedden. Deze derde partij plaatst cookies voor analytische doeleinden.

AdvertisingOur website places advertising cookies to show you 3rd party advertisements based on your interests. These cookies may track your personal data.

OtherOur website places 3rd party cookies from other 3rd party services which aren't Analytical, Social media or Advertising.