Skip to content

Instantly share code, notes, and snippets.

@DudeThatsErin
Created May 31, 2025 18:15
Show Gist options
  • Save DudeThatsErin/6fdef06d3b35c4809dea38a59ff4d395 to your computer and use it in GitHub Desktop.
Save DudeThatsErin/6fdef06d3b35c4809dea38a59ff4d395 to your computer and use it in GitHub Desktop.
This is how I manually add dividers to my Obsidian Vault.
/* File Explorer Dividers */
.nav-folder:has(> :is(
[data-path="00-assets"],
[data-path="01-clips"],
)), .nav-file:has(> :is([data-path="1 - Tasks.md"],[data-path="SCRATCHPAD.md"])) {
position: relative;
&::before {
content: "";
--padding-x: 10px;
margin-inline-start: calc(24px - var(--padding-x));
padding: 0 var(--padding-x);
background-color: var(--background-secondary);
/*background-color: #262626;*/
}
&::after {
content: "";
display: block;
position: absolute;
top: calc(0.5em * var(--line-height-tight));
width: 100%; /* change for something smaller if you don't want the divider to span full length */
height: 0;
border-top: 1px solid currentColor;
z-index: -1;
}
}
.nav-folder:has(> [data-path="00-assets"])::before { content: "📦 Storage 📦"; }
.nav-folder:has(> [data-path="01-clips"])::before { content: "♡ Clippings ♡"; }
.nav-file:has(> [data-path="SCRATCHPAD.md"])::before { content: "» Scratchpad «"; }
.nav-file:has(> [data-path="1 - Tasks.md"])::before { content: "☆ Tasks ☆"; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment