Displaying External Link Icon in Preview Mode using CSS

Hi there,

I’m interested in finding a way to display the link icon on the right side of an external link in the preview mode of Obsidian. As you know, the reading mode has this feature, but I would like to have it in the preview mode as well. The purpose is to easily distinguish between external and internal links.

To achieve this, I have been attempting to create a CSS snippet. However, I haven’t been successful in locating the icon for external links in the reading view’s developer mode.

If anyone has any suggestions or solutions to implement this feature using CSS or any other method, I would greatly appreciate the assistance. Thank you!

Using Obsidian CSS guide, I looked at an external link in both reading and live-preview. I then found that the external links are using .external-link in reading, and that potentially the equivalent within live-preview is .cm-url. So I then tried adding the definitions used for .external-url (lifted from the Styles pane in Developer tools) into a snippet:

.cm-url { 
   color: var(--link-external-color);
   text-decoration-line: var(--link-external-decoration);
   background-position: center right;
   background-repeat: no-repeat;
   background-image: linear-gradient(transparent, transparent), url(public/images/874d8b8e340f75575caa.svg);
   background-size: 13px;
   padding-right: 16px;
   background-position-y: 4px;
   cursor: var(--cursor-link);
   filter: var(--link-external-filter);
}

And this turned out somewhat nicely to add the external link also within live-preview. I’ve got no idea whether this will affect some other links besides the true external links, but it seems to do the trick… :smiley:

Bonus tip: How to add a custom CSS snippet
  • Goto Settings > Appearance and scroll down to “CSS snippets” section, and hit the folder icon on the far right. This opens up a file explorer window, in the folder vault/.obsidian/snippets, which is were you want to save your css snippet
  • In this new window create a file, like myCss.css, where you copy the CSS into. Make sure this actually is a text file, and that the name ends in .css
  • Back in Obsidian, you should now see your myCss in the list of CSS snippets. If not, hit the refresh button
  • Final step is to click the enable button to the right of your file, and now your new CSS should be in effect
  • If you later on make changes in the CSS snippet file, the effect should be immediate. If not, try disabling and re-enabling the snippet, or in some strange cases, you would need to reload Obsidian. In 99% of the cases, the changes are immediate, though.

Wow, thank you so much! It works perfectly! I think it will be a huge help to my workflow. It’s awesome! I also appreciate the detailed explanation. :blush:

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