Mark external links and PDF files with CSS

It's a boost to the usability of your website when you clearly indicate that a link leads out of the site or to a PDF file.

Plugins are not necessary

Many Internet users get a bit confused when they click on links that lead away from the current website, unless this is clearly indicated.

There are WordPress plug-ins that can add a symbol after an external link. Common to them is that it adds some extra code to your website.

Of course, you could just put “External link” or “PDF” after your links, but if you’re like me, or work in a team, you also know that it’s unlikely to be a consistent effort.

Let CSS do the job for you

Fortunately, CSS offers some clever features that make it easy to address links that, for example, point to pages that don’t end in oldrup.dk, or links that end in .pdf. Once we know that, we can add something afterwards. I like the “black upper right triangle” symbol. It looks like this: ◥

When it comes to PDF files, a small PDF is a good choice in my opinion. You could also use a small SVG graphic. As always – when styling via CSS, it’s easy to change.

Examples of styling

Below, you can see the difference between inline links to external websites and PDF files.

The movement Vild Med Vilje has prepared the leaflet Vilde Haver in close cooperation with Fredericia Municipality

PDF label in Gutenberg file block

The National Association “Praktisk Økologi” has published a guide on how to create more wild nature where you live. The guide is also available in a compressed version below. Note how the small PDF label is added to the file name, but omitted in the button.

Please no mysterious symbol at the end of image files

Minor update to the code here in 2023: If images link to external websites, we are not interested in a symbol after the image. Hence the small addition of :not(.wp-block-image) to the code snippet below. In this example, the Mastodon logo links to my Mastodon profile.

Link to Bjarne Oldrup's Mastodon-profile
No symbol on external links here please

The CSS below can be added to your WordPress website. Of course, remember to change [href*="oldrup.dk"] to your own domain name.

The code intentionally only addresses external links in your body text. If you have links outside this section that you want to mark, for example in your header or footer, you can add the rel="external" attribute to the link.

CSS snippet

/*** 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 'Accessible PDF' label */
.is-accessible a[href$=".pdf"] {
    --link-suffix-content: "\00A0Accessible\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;
}

If you want to know more

Here are a few references if you want to know more about how to use CSS Pseudo Elements and Attribute Selectors to your advantage, or if you want to extend the code to include e.g. Word documents or YouTube links. Make it easy for yourself and your visitors.

Can you use little code snippets like this? I have more where this came from. Feel free to drop a comment below.

Bjarne Oldrup

Bjarne Oldrup

Bjarne is a web developer with a passion for a sustainable, inclusive and respectful internet.

With a background as a computer technician, graduating in 1992, he has worked as a programmer, system administrator and network specialist. Today, he focuses on website carbon footprint, web accessibility and GDPR compliance.

For the past decade, Bjarne has primarily worked for medium-sized companies until, in 2021, together with Lars Bengtsson, he went freelance at the company SustainableWeb.dk to help customers with their websites' carbon footprint and to further develop and communicate healthy web habits.

WordPress, HTML, CSS and LiteSpeed web servers are Bjarne's favourite tools, and the open-source community is his comfort zone.

Efterlad et svar

Your email address will not be published. Required fields are marked *