Styling internal and external links differently
#cssThe Zola static site generator can mark external links with a CSS class as of #2717. This is documented in the configuration page on the Zola website.
[markdown]
# CSS class to add to external links (e.g. "external-link")
external_links_class = "external-link"
To make it work I just had to add some SASS to target the external link class and display them differently. I ended up with the following:
:root {
--background-less-dark: #222222;
--color-links: #a392ff;
// same colour as normal links... for now...
--color-links-external: var(--color-links);
--color-links-external-hover-url: #a1a1a1;
}
a,
a:visited {
color: var(--color-links);
text-decoration: none;
}
a:hover {
text-decoration: underline;
background-color: var(--background-less-dark);
}
a.external-link {
color: var(--color-links-external);
&:hover {
&::after {
content: " (" attr(href) ")";
display: inline-block;
font-size: 0.85em;
color: var(--color-links-external-hover-url);
margin-left: 4px;
}
}
}
I ended up keeping external links the same colour as regular ones. The difference is that when you hover over the link, it will show you the URL that you are about to visit (to let you know where you are going).
[Alice]
Test it with the link below...