Displaying External Link Icon in Preview Mode using CSS

Custom CSS & Theme Design
2

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.
1 Like