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.

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

/*** Symbol or label after external links 2022-04-20 ***/


/* Target content section, explicit external links and PDF's */

.entry-content a[href^="https"]:not([href*="oldrup.dk"]):after,
a[rel*="external"]:after,
.entry-content p a[href$=".pdf"]:after,
.wp-block-file a[href$=".pdf"]:first-of-type:after {
	content: var(--link-suffix-content, "\25E5");
	display: inline-block;
	padding-bottom: 0.3rem;
	font: normal var(--link-suffix-weight, normal) 0.6em sans-serif;
	vertical-align: text-top;
	text-decoration: none;
}


/* Use PDF label and bold weight on PDF files */

a[href$=".pdf"] {
	--link-suffix-content: "\00A0PDF";
	--link-suffix-weight: bold;
}


/* Blocksy: No decoration on links with symbol unless hovering */

.entry-content a[href^="https"]:not([href*="oldrup.dk"]):not(:hover),
a[rel*="external"]:not(:hover) {
	--has-link-decoration: var(--false);
}

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.

HTML attribute: rel on MDN Web Docs

Pseudo-elements on MDN Web Docs

Attribute selectors on MDN Web Docs

CSS entities on W3schools

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

Share this article
Læs mere om Bjarne Oldrup, Sønderborg

Bjarne Oldrup

Web developer with a passion for WordPress, sustainable web design, GDPR and web accessibility.

Leave a Reply

Your email address will not be published.