Markér eksterne links og PDF-filer med CSS

Det er et løft for brugervenligheden at dit website, når du tydeligt indikerer at et link fører ud af sitet eller til en PDF fil.

Plugins er ikke nødvendige

Mange internet-brugere bliver en smule forvirret, når de klikker på links som fører væk fra det aktuelle website, med mindre dette er tydeligt indikeret.

Der findes WordPress plug-ins der kan tilføje et symbol efter et eksterne links. Fælles for dem er, at det tilføjer en del ekstra kode til dit website.

Du kan selvfølgelig også bare skrive “Eksternt link” eller “PDF” efter dine links, men hvis du er ligesom mig, eller arbejder i et team, så ved du også at det næppe bliver en konsekvent indsats.

Lad CSS gøre arbejdet for dig

Heldigvis tilbyder CSS nogle smarte funktioner, der gør det let at adressere links, som f.eks. peger på sider der ikke ender på oldrup.dk, eller links som ender på .pdf. Når vi kan det, så kan vi tilføje noget bagefter. Jeg kan godt lide symbolet “black upper right triangle”. Det ser sådan her ud: ◥

Når det kommer til PDF filer, er et lille PDF et godt valg efter min mening. Man kunne også anvende en lille SVG-grafik. Som altid – når du styler via CSS, er det let at ændre.

Opdatering: En lille hage tegnet ◥

Jeg er blevet opmærksom på, at diverse symboler og tekster vi tilføjer efter links, bliver læst op af skærmlæsere. Det betyder, at med nedenstående kode vil et eksternt link, afhængig af skærmlæser, blive efterfulgt at ordene “black upper right triangle”

Det er selvsagt ikke optimalt. Og der er ikke umiddelbart nogen indlysende løsning på det problem fordi:

  1. Der findes et UTF-8 link symbol 🔗men det vises meget forskelligt i forskellige browsere – det er med andre ord ret grimt.
  2. Når vi bruger CSS’ content property, kan vi kun manipulere med indholdet af den efterfølgende tekst. Vi kan altså ikke fx tilføje en aria-label eller en alt-tekst til en eventuel inline SVG grafik.
  3. Man kan ikke bruge media queries til at konstatere om der benyttes skærmlæsere og fx benytte teksten “eksternt link” i stedet for trekanten.

Så metoden her, gør nok livet lidt lettere for normalt seende, men er formentlig irriterende for brugere af skærmlæsere.

PDF-etiketten fejler ikke noget. Der er kun ◥ vi skal finde en bedre løsning til. Smid gerne en kommentar nederst, hvis du har et godt forslag.

Eksempler på styling

Herunder, ser du forskellen på inline-links til eksterne websites og PDF filer.

Bevægelsen Vild Med Vilje har udarbejdet folderen Vilde Haver i tæt samarbejde med Fredericia Kommune

PDF etiket i Gutenberg fil-blok

Landsforeningen Praktisk Økologi har udgivet en guide i hvordan du skaber mere vild natur hvor du bor. Guiden er også, for eksemplets skyld, mulig at hente i en komprimeret udgave herunder. Bemærk hvordan den lille PDF-etiket er føjet til filnavnet, men undladt i knappen.

Venligst intet mystisk symbol i enden af billedfiler

Mindre opdatering til koden her i 2023: Hvis billeder linker til eksterne websites, er vi ikke ikke interesseret i et symbol efter billedet. Derfor den lille tilføjelse af :not(.wp-block-image) til kodestumpen længere nede. I eksemplet her, linker Mastodon logo’et til min Mastodon profil.

Link til Bjarne Oldrups Mastodon-profil
No external link symbol here please

Nedenstående CSS kan du tilføje til dit WordPress website. Du skal selvfølgelig huske at ændre [href*="oldrup.dk"] til dit eget domæne-navn.

Koden adresserer med vilje kun eksterne links i din brødtekst. Har du links uden for denne sektion som du ønsker at markere, f.eks. i din header eller footer, kan du tilføje rel="external" attributten til linket.

CSS kodestump

/*** WP: Symbol or label after external links ***/

/* Apply suffix symbol to content on screen, no need on print */
@media only screen {
    body {
        --link-suffix-content: "\25E5";
    }
}

/* If link is to a pdf file, add the PDF-label */
a[href$=".pdf"] {
    --link-suffix-content: "\00A0PDF";
    --link-suffix-weight: 600;
}

/* If accessible class is added to pdf link parent, use 'Tilgængelig PDF' label */
.is-accessible a[href$=".pdf"] {
    --link-suffix-content: "\00A0Tilgængelig\00A0PDF";
}

/* Target content links (exluding image links), explicit external links and PDF's */
a[rel*="external"]:after,
.entry-content :not(.wp-block-image) > a[href^="https"]:not([href*="oldrup.dk"]):after,
.entry-content :is(p, .wp-element-caption, .sw-file-list) a[href$=".pdf"]:after,
.wp-block-file a[href$=".pdf"]:first-of-type:after {
    content: var(--link-suffix-content, "");
    display: inline-block;
    padding-bottom: 0.6em;
    font: normal var(--link-suffix-weight, normal) 0.6em sans-serif;
    vertical-align: text-top;
    text-decoration: none;
}

Hvis du vil vide mere

Her er et par referencer, hvis du vil vide mere om hvordan du kan bruge CSS Pseudo Elements og Attribute Selectors til din fordel, eller hvis du vil udvide koden til også at omfatte fx Word dokumenter eller YouTube links. Gør det nemt for dig selv og dine besøgende.

Kan du bruge små kodestumper som denne her til noget, for så har jeg flere hvor de kommer fra. Smid meget gerne en kommentar herunder.

Bjarne Oldrup

Bjarne Oldrup

Bjarne er webudvikler med en stor forkærlighed for det bæredygtige, inkluderende og respektfulde internet.

Med en baggrund som datatekniker, uddannet i 1992, har han arbejdet som programmør, systemadministrator og netværksspecialist. I dag fokuserer han på hjemmesiders klimaaftryk, webtilgængelighed og GDPR-compliance.

WordPress, HTML, CSS og LiteSpeed webservere er Bjarnes foretrukne redskaber, og open source-fællesskabet hans komfortzone.

Bjarne bor i Sønderborg i et lille rækkehus med en vild have og en doven kat.

Efterlad et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *