My WordPress site has thousands of links to other web servers. Inevitably, these links grow old and many get lost. I use the excellent and highly recommended Broken Link Checker for WordPress to scan all the blog posts, and flag the links that aren’t working. It sends me an email each morning. There are many reasons why a link wouldn’t work, and a variety of error messages that can result: the request could time out because the web server is down, the network is having a bad day, or the site is no longer available. The request for the link could be rejected, redirected, of forbidden with a variety of error results, some transient and some permanent. If I think the link is down permanently, I can try to find an archive.org archive of the page (which the plugin helps to find) or remove the links as irretrievably gone.
Broken Link
When the plugin discovers a broken link, it wraps the link in an HTML element that allows you to highlight the error in a variety of ways. I’ve chosen a red wavy underline to highlight the broken link, and automatically added the text “(Broken link)” to the link. For links that I’ve reviewed and decided they are not only broken, but gone forever, I use a different highlight: an orange dotted underline followed by “(link removed)”. If the reader floats their mouse over the removed link, it will display a caption showing where the link used to go.
All this magic is performed thanks to the plugin, and a little bit of styling. The plugin allows the author to specify their own styles, and I’ve chosen to use the following CSS to create the effect:
.broken_link, a.broken_link {
-webkit-text-decoration-line: underline;
-webkit-text-decoration-color:red;
-webkit-text-decoration-style: wavy;
text-decoration-line: underline;
text-decoration-color:red;
text-decoration-style: wavy;
}
.broken_link::after, a.broken_link::after {content: ' (link broken)';}
How do you learn to type such gobbledegook? Search the web, view other sites whose styles you like, and do your research. In this case, the text-decoration advanced styles (line, color and style) are fairly recent additions to most browsers. You can check on the appropriateness of using new styles at sites like caniuse.com, which can tell you which browsers and browser versions support the styles you’d like to apply. At the link above, you’ll s
Removed Link
ee the style won’t work in Microsoft’s Internet Explorer and Edge, which are another good reason not to use them. The style is supported in the most recent version of FireFox and Chrome, which is good enough for me. I also recommend looking at the “Usage relative” link on caniuse.com, as that shows what version people are actually using, rather than the latest cutting edge version. In this case, caniuse tells me that Google Chrome and IOS’ Safari work better with the -webkit- prefix, so that’s why the style is repeated with and without the prefix.
(Yes, the text-decoration has a shortened form which combines the color, line and effect in a single shortcut line:
.broken_link, a.broken_link {-webkit-text-decoration: red wavy underline;}
but I prefer the longer form, at least until I’m more familiar with the new styles, and the browser compatibility issues.)