Styling external links according to target url in Preview mode

Custom CSS & Theme Design
1

I have the following CSS snippet activated in my Obsidian vault:

a[href^="file://"] {
    color: green;
}

I want to use it to make all links to local files and folders appear in green. (The links look like [my file](file:///path/to/file)) This works great, except it only applies in Reading mode. It does not work in Preview mode.

Using

a {
    color: green;
}

does work in both Reading and Preview mode, but obviously does it for everything and not just local files.

Here is the full CSS:

.external-link,
.external-link:hover,
.markdown-source-view-mod-cm6 .cm-link .cm-underline,
.markdown-source-view-mod-cm6 .cm-link .cm-underline:hover {
  background-image: linear-gradient(transparent, transparent), url(public/images/874d8b8e340f75575caa.svg);
  padding-right: 16px;
  background-position-y: 4px;
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center right;
}

a[href^="file:/"] {
  color: green;
}

The first part undoes the removal of the icon that the theme I use does. (It makes it so that external links are underlined and internal links aren’t.)

Eventually, I’d like to change the icon based on the path (e.g., Wikipedia vs Youtube vs PDF etc) and the colour based on whether it’s an internal link, external link, or a link to a file or folder on my computer/phone.

2

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.