At the end of each footnote entry there is a small symbol, usually an arrow like ↩, that links back up to the corresponding number in your post content. This is the back link, and it is one of the most overlooked elements in footnote styling.
This tutorial covers how to style, resize, and optionally replace or hide the back link using CSS.
What is the back link?
When a reader clicks a footnote number they jump to the footnotes list at the bottom of the page. The back link gives them a way to return to exactly where they were in the post. It is a small but important usability feature, particularly on long posts with many footnotes.
Footnotes Made Easy outputs the back link as an anchor tag with the class footnote-back-link:
Adjusting the size
The back link inherits the font size of its parent list item. If you have already reduced the footnote list font size to something like 80%, the back link will already be smaller than body text. You can set an explicit size if you need more control:
.footnote-back-link {
font-size: 12px;
}
Changing the color
By default the back link uses your theme’s link color. To give it a distinct color or to match the styling of your footnote links:
.footnote-back-link {
font-size: 12px;
color: #540B0E;
}
.footnote-back-link:hover {
color: #2a0507;
}
Removing the underline
Back links often look cleaner without an underline, since the arrow symbol already communicates that the element is interactive:
.footnote-back-link {
font-size: 12px;
color: #540B0E;
text-decoration: none;
}
.footnote-back-link:hover {
text-decoration: underline;
}
Replacing the arrow symbol with custom text
If you prefer a different symbol or text label, you can hide the default content and replace it using CSS. Note that this approach works in modern browsers but may not apply in all environments:
.footnote-back-link {
font-size: 0;
}
.footnote-back-link::before {
content: "↑";
font-size: 12px;
color: #540B0E;
}
Setting font-size: 0 on the element hides the original character, and ::before inserts your replacement. You can use any character or short text string in the content value.
Hiding the back link entirely
.footnote-back-link {
display: none;
}
If you prefer footnotes without back links, you can hide them with CSS rather than changing the plugin settings:
This hides only the back link arrow and leaves all other footnote content intact.
A complete, clean snippet
/* Footnote back links */
.footnote-back-link {
font-size: 12px;
color: #540B0E;
text-decoration: none;
}
.footnote-back-link:hover {
color: #2a0507;
text-decoration: underline;
}
Paste this into Appearance → Customize → Additional CSS and adjust the color values to suit your theme. Your back links will be neatly sized, distinctly colored, and free of an unnecessary underline at rest.
