Indikation af eksterne links og PDF-filer med CSS

Det er et stort 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.

Mange internet-brugere bliver en lille smule irriteret, når de klikker på et links som fører væk fra den side de er på, med mindre dette er tydeligt indikeret.

Links til PDF-filer, er også eksterne i den forstand, at man ledes væk fra siden og ind i en PDF-fil, som typisk vises i et browser-vindue, med mindre man har Adobe Reader eller tilsvarende installeret.

Plugins eller manuel styling er unødvendigt

Der findes flere WordPress plugins 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 i bedste fald bliver en sporadisk 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 et symbolet “black upper right triangle” der alligevel findes i tegnsættet. Det ser sådan her ud: ◥

Når det kommer til PDF filer, er et lille PDF et godt valg efter min mening, men man kunne også anvende en lille SVG-grafik. Som altid – når du styler via CSS, kan du nemt skifte mening 🙂

Eksempler på styling

Inline-links i tekstafsnit

I eksemplet 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.

Tilføj symbol eller etiket efter eksterne links

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, ellers vil alle links (også interne) blive markeret.

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

CSS kodestump

/*** Symbol or label after external links 2021-06-13 ***/

/*** Add symbol after external links ***/
main a[href^="https"]:not([href*="oldrup.dk"]):after,
a[rel*="external"]:after {
  display: inline-block;
  font-size: 0.6em;
  font-weight: normal;
  font-style: normal;
  vertical-align: text-top;
  padding-bottom: 0.3rem; /* for links in buttons */
  text-decoration: none;
  content: "\25E5";
}

/*** Add label to PDF filenames inline or file block description ***/
main .entry-content p a[href$=".pdf"]:after,
main .wp-block-file a[href$=".pdf"]:first-of-type:after {
  display: inline-block;
  font-size: 0.6em;
  font-weight: bold;
  font-style: normal;
  vertical-align: text-top;
  padding-bottom: 0.3rem; /* for links in buttons */
  text-decoration: none;
  content: " PDF";
}

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 nu vil udvide koden, til også at omfatte fx Word dokumenter eller YouTube links. Gør det nemt for dig selv og dine besøgende.

HTML attribute: rel på MDN Web Docs

Pseudo-elements på MDN Web Docs

Attribute selectors på MDN Web Docs

CSS entities på W3schools

Kunne du bruge det til noget?

Jeg vil rigtig gerne vide, om du kan bruge små kodestumper som denne her til noget, for så har jeg flere hvor de kommer fra. Smid meget gerne en kommentar herunder.

Skriv en kommentar