CSS Snippet: Keep divider line from being folded into headers

rzen · June 29, 2024, 2:21pm

Thanks for the snippet @mattmaiorana!

I took a moment to simplify it quite a bit. This version targets all heading levels and accomplishes everything form your original snippet within a single declaration:

/* 
Hide non-active headers that are followed by hr divider line.
*/
.HyperMD-header:not(.cm-active):has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

Then I expanded it so any headings with text will still be visible. In this version, only non-active and empty headings followed by an hr divider are hidden:

/* 
Hide non-active and empty headers that are followed by hr divider line.
*/
.HyperMD-header:not(.cm-active):not(:has(.cm-header:not(.cm-formatting))):has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}