Horizontal rule line CSS (use a local SVG in a custom horizontal rule line)

Custom CSS & Theme Design
3

Thank you so much! I might try data URls.

I have found something similar - GitHub - Carbonateb/obsidian-encore-theme: The Encore theme aims to freshen up the UI of Obsidian.md with modern design, loosely based off Material 3.

image
image620×169 11.4 KB

But when I copy its horizontal rule code into my css and enable the script, nothing seems to be changed

// Horizontal rule
body:not(.encore-disable-logo-on-hr) {
  .markdown-rendered hr,
  .cm-line.hr hr {
    height: 1px;
    background-image: linear-gradient(
      to right,
      transparent,
      var(--hr-color) 46.2%,
      transparent 46.2%,
      transparent 54%,
      var(--hr-color) 54%,
      transparent
    );
    border: none;
    position: relative;
    overflow: visible;
  }
  .markdown-source-view:not(.is-live-preview) .HyperMD-hr::after,
  .markdown-rendered hr::after,
  .cm-line.hr hr::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--obsidian-logo-small);
  }
  // Horizontal rule live preview tweak
  .markdown-source-view:not(.is-live-preview) .HyperMD-hr {
    position: relative;
  }
  .markdown-source-view:not(.is-live-preview) .HyperMD-hr::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 13px;
    height: 1px;
    background-image: linear-gradient(
      to right,
      transparent 10%,
      var(--hr-color) 46.2%,
      transparent 46.2%,
      transparent 54%,
      var(--hr-color) 54%,
      transparent
    );
  }
  .markdown-source-view:not(.is-live-preview) .HyperMD-hr::after {
    top: 2px;
  }
}

Is there something I’m missing?