Cross-platform absolute path in CSS snippet

[franksisco]

Hi, I am trying to write a snippet to inserts a svg icon at the beginning of an external markdown link if it contains “https://www.youtube.com/”.
The snippet I am trying to use is this but it doesn’t work and the problem is the path to the svg file

a[href^=“https://www.youtube.com/”]::before {
  content: url('root folder/subfolder/subsubfolder/svg file.svg');
  display: inline-block;
  width: 12px; /* Size of icon */
  height: 12px; /* Size of the icon */
  margin-right: 5px; /* Space between icon and link text */
}

I need the svg path not to be relative to the active note but absolute. Unfortunately I need also the path to work on both pc and smartphone. How do I get such a cross-platform absolute path in the snippet?
Thanks

[holroy]

It’s hairy but if you store the reference to the svg file in a variable, and set the variable depending on your device it should work.

I’ve seen some playing around with @media and viewport sizes to determine which device are in use. A quick Google search should reveal the current best hacks to determine which device you’re on.

[franksisco]

Thank you, yes it seems the only solution