If you’re like me and use divider lines to visually separate note sections - this snippet is for you!
One of my pain points using Obsidian is that I like to use divider lines (aka divider bar or <hr> / horizontal rule) to make the different sections of my notes visually distinct. I use headers for section titles, but at a glance I like the visual of a divider line between sections as well.
The problem? Folding (aka collapsing) a header section (which I often do in certain notes) hides the divider line. While this is correct as per the Markdown spec, I wanted a workaround.
So, here’s my fix (originally shared in a feature request post):
The below CSS snippet makes it easy to turn a divider into a header (protecting it from folding), doesn’t introduce any additional characters or html into the note, and leaves everything working normally except when # is added to the line immediately above your ---:
/*
Hide and resize H1 style when it has a hr divider line immediately after.
*/
.HyperMD-header-1:has(+ .hr) {
opacity: 0;
font-size: 1px;
}
.cm-active.HyperMD-header-1:has(+ .hr) {
opacity: 100;
font-size: var(--h1-size);
}
The snippet is pretty simple! Here’s how to use it after installing:
- Add
#to the line before your divider line (---) - That’s it!
What the snippet is doing: It’s basically restyling your H1 (#) when it’s immediately followed by a --- on the next line (which Obsidian automatically adds a hr class to). Thanks to the CSS has:() modifier it’ll only restyle your H1 if it sees an hr class after.
The H1 line will then become 1px (so the spacing around the divider looks good) and the visible markdown will disappear without needing to do anything else to it. To keep things user friendly, the H1 line will display normally when it’s the active line so it’s easy to adjust or delete the markdown whenever needed.
If you want the same thing to happen with H2-6, here’s the CSS for that (I personally always use H2 for my divider lines as H1 is reserved for my note title):
/*
Hide and resize header styles when there's a hr divider line immediately after.
*/
.HyperMD-header-1:has(+ .hr) {
opacity: 0;
font-size: 1px;
}
.cm-active.HyperMD-header-1:has(+ .hr) {
opacity: 100;
font-size: var(--h1-size);
}
.HyperMD-header-2:has(+ .hr) {
opacity: 0;
font-size: 1px;
}
.cm-active.HyperMD-header-2:has(+ .hr) {
opacity: 100;
font-size: var(--h2-size);
}
.HyperMD-header-3:has(+ .hr) {
opacity: 0;
font-size: 1px;
}
.cm-active.HyperMD-header-3:has(+ .hr) {
opacity: 100;
font-size: var(--h3-size);
}
.HyperMD-header-4:has(+ .hr) {
opacity: 0;
font-size: 1px;
}
.cm-active.HyperMD-header-4:has(+ .hr) {
opacity: 100;
font-size: var(--h4-size);
}
.HyperMD-header-5:has(+ .hr) {
opacity: 0;
font-size: 1px;
}
.cm-active.HyperMD-header-5:has(+ .hr) {
opacity: 100;
font-size: var(--h5-size);
}
.HyperMD-header-6:has(+ .hr) {
opacity: 0;
font-size: 1px;
}
.cm-active.HyperMD-header-6:has(+ .hr) {
opacity: 100;
font-size: var(--h6-size);
}
Hope others find this helpful! I love Obsidian snippets.
