Styling external links according to target url

[pbinkley]

What I’m trying to do

In reading mode, I would like to style links to my Zotero database (which uses urls like zotero://select/library/items/PI6IBH2C) differently from other external links. In a pure html environment I’d do something like this: a[href^="zotero://"] {} (to select links whose target begins with “zotero://”), but I haven’t been able to figure out how to do that selection in Obsidian.

Things I have tried

I’ve got as far as using the .external-link selector in a css snippet to customize the styling of all external links, but I haven’t figured out how to select based on the target url.

[holroy]

Have you tried doing just the same? I tried with the following CSS:

a[href^="zotero://"] {
  color: green;
  &::after {
    content: "<- ZOTERO"
  }
}

On a test file containing:

[zotero style](zotero://select/library/items/PI6IBH2C)

[ordinary style](http://google.com)

And it displays as:

Disclaimer: As usual, don’t use my CSS as design style guidelines…

[pbinkley]

Thank you! That’s exactly what I needed. I guess I need to learn more about Obsidian’s rendering.