This CSS snippet adds indicators next to headings to quickly gauge what level it is at.
Lifted from the Border theme. Claude refactored the code to be less verbose and added settings to allow to toggle indicators for each heading level.
Sharing three versions.
Version with the collapse icon replaced by H1, H2 etc.
CSS snippet
Border_theme_heading_level_indicators.css (12.1 KB)
/* Credit: Border theme by Akifyss: https://github.com/Akifyss/obsidian-border */
/* ========== SETTINGS ========== */
body {
/* HEADING INDICATORS: 1 = show colored bar | 0 = hide */
--h1-indicator: 1;
--h2-indicator: 1;
--h3-indicator: 1;
--h4-indicator: 1;
--h5-indicator: 1;
--h6-indicator: 1;
/* Heading colors */
--h1-accent-color: var(--color-red);
--h2-accent-color: var(--color-orange);
--h3-accent-color: var(--color-yellow);
--h4-accent-color: var(--color-green);
--h5-accent-color: var(--color-blue);
--h6-accent-color: var(--color-purple);
}
/* ====== Base Heading Styles ====== */
.markdown-rendered > :is(h1,h2,h3,h4,h5,h6),
.markdown-preview-sizer > div > :is(h1,h2,h3,h4,h5,h6) {
position: relative;
padding-left: 12px;
}
/* Heading collapse positioning - keep icon outside the indicator */
.markdown-preview-view .heading-collapse-indicator,
.is-live-preview .HyperMD-header .collapse-indicator.collapse-icon {
transform: translateX(-16px);
}
/* ====== Colored Heading Indicators ====== */
.is-live-preview .HyperMD-header-1::before,
.is-live-preview .HyperMD-header-2::before,
.is-live-preview .HyperMD-header-3::before,
.is-live-preview .HyperMD-header-4::before,
.is-live-preview .HyperMD-header-5::before,
.is-live-preview .HyperMD-header-6::before {
margin-right: 6px;
content: " ";
display: inline-block;
width: 3px;
border-radius: var(--radius-m);
transform: translateY(4px);
}
.markdown-rendered > h1::before,
.markdown-rendered > h2::before,
.markdown-rendered > h3::before,
.markdown-rendered > h4::before,
.markdown-rendered > h5::before,
.markdown-rendered > h6::before,
.markdown-preview-sizer > div > h1::before,
.markdown-preview-sizer > div > h2::before,
.markdown-preview-sizer > div > h3::before,
.markdown-preview-sizer > div > h4::before,
.markdown-preview-sizer > div > h5::before,
.markdown-preview-sizer > div > h6::before {
content: " ";
display: inline-block;
width: 3px;
border-radius: var(--radius-m);
position: absolute;
top: 4px;
left: 3px;
}
/* Indicator heights and colors per level */
.is-live-preview .HyperMD-header-1::before,
.markdown-rendered > h1::before,
.markdown-preview-sizer > div > h1::before {
height: calc(1.2em - 8px);
background-color: var(--h1-accent-color);
opacity: var(--h1-indicator);
}
.is-live-preview .HyperMD-header-2::before,
.markdown-rendered > h2::before,
.markdown-preview-sizer > div > h2::before {
height: calc(1.2em - 8px);
background-color: var(--h2-accent-color);
opacity: var(--h2-indicator);
}
.is-live-preview .HyperMD-header-3::before,
.markdown-rendered > h3::before,
.markdown-preview-sizer > div > h3::before {
height: calc(1.3em - 8px);
background-color: var(--h3-accent-color);
opacity: var(--h3-indicator);
}
.is-live-preview .HyperMD-header-4::before,
.markdown-rendered > h4::before,
.markdown-preview-sizer > div > h4::before {
height: calc(1.4em - 8px);
background-color: var(--h4-accent-color);
opacity: var(--h4-indicator);
}
.is-live-preview .HyperMD-header-5::before,
.is-live-preview .HyperMD-header-6::before,
.markdown-rendered > h5::before,
.markdown-rendered > h6::before,
.markdown-preview-sizer > div > h5::before,
.markdown-preview-sizer > div > h6::before {
height: calc(1.5em - 8px);
}
.is-live-preview .HyperMD-header-5::before,
.markdown-rendered > h5::before,
.markdown-preview-sizer > div > h5::before {
background-color: var(--h5-accent-color);
opacity: var(--h5-indicator);
}
.is-live-preview .HyperMD-header-6::before,
.markdown-rendered > h6::before,
.markdown-preview-sizer > div > h6::before {
background-color: var(--h6-accent-color);
opacity: var(--h6-indicator);
}
/* ====== NUMBERED COLLAPSE ICONS (H1, H2, etc.) ====== */
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-1 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-2 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-3 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-4 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-5 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-6 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h1 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h2 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h3 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h4 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h5 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h6 .collapse-indicator.collapse-icon svg {
transform: translateX(0px);
background-color: currentColor;
}
/* H1 numbered icon */
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-1 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h1 .collapse-indicator.collapse-icon svg {
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="10" height="10"/><path d="M0,1H1.18v3.43H3.53V1h1.18V9h-1.18v-3.43H1.18v3.43H0V1ZM6.47,9v-1.14h1.18V2.32l-1.47,.82V1.82l1.47-.82h1.18V7.86h1.18v1.14h-3.53Z"/></svg>');
}
/* H2 numbered icon */
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-2 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h2 .collapse-indicator.collapse-icon svg {
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="10" height="10"/><path d="M0,1H1.11v3.43H3.33V1h1.11V9h-1.11v-3.43H1.11v3.43H0V1ZM10,9h-3.33c-.29,0-.58-.12-.79-.33-.21-.21-.33-.51-.33-.81s.11-.57,.3-.78l2.71-2.99c.21-.21,.33-.49,.33-.81s-.12-.59-.33-.81c-.21-.21-.49-.33-.79-.33s-.58,.12-.79,.33c-.21,.21-.33,.51-.33,.81h-1.11c0-.61,.23-1.19,.65-1.62,.42-.43,.98-.67,1.57-.67s1.15,.24,1.57,.67c.42,.43,.65,1.01,.65,1.62s-.25,1.2-.65,1.62l-2.68,2.95h3.33v1.14Z"/></svg>');
}
/* H3 numbered icon */
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-3 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h3 .collapse-indicator.collapse-icon svg {
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="10" height="10"/><path d="M0,1H1.11v3.43H3.33V1h1.11V9h-1.11v-3.43H1.11v3.43H0V1Zm6.67,0h2.22c.29,0,.58,.12,.79,.33,.21,.21,.33,.51,.33,.81V7.86c0,.3-.12,.59-.33,.81-.21,.21-.49,.33-.79,.33h-2.22c-.29,0-.58-.12-.79-.33-.21-.21-.33-.51-.33-.81v-.57h1.11v.57h2.22v-2.29h-2.22v-1.14h2.22V2.14h-2.22v.57h-1.11v-.57c0-.3,.12-.59,.33-.81,.21-.21,.49-.33,.79-.33Z"/></svg>');
}
/* H4 numbered icon */
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-4 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h4 .collapse-indicator.collapse-icon svg {
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="10" height="10"/><path d="M0,1H1.11v3.43H3.33V1h1.11V9h-1.11v-3.43H1.11v3.43H0V1ZM8.33,9v-2.86h-2.78v-1.14L8.33,1h1.11V5h.56v1.14h-.56v2.86h-1.11Zm0-4V2.95l-1.42,2.05h1.42Z"/></svg>');
}
/* H5 numbered icon */
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-5 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h5 .collapse-indicator.collapse-icon svg {
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="10" height="10"/><path d="M0,1H1.11v3.43H3.33V1h1.11V9h-1.11v-3.43H1.11v3.43H0V1Zm6.67,0h2.78v1.14h-2.78v2.29h1.11c.59,0,1.15,.24,1.57,.67,.42,.43,.65,1.01,.65,1.62s-.23,1.19-.65,1.62c-.42,.43-.98,.67-1.57,.67h-1.11c-.29,0-.58-.12-.79-.33-.21-.21-.33-.51-.33-.81v-.57h1.11v.57h1.11c.29,0,.58-.12,.79-.33,.21-.21,.33-.51-.33-.81s-.12-.59-.33-.81c-.21-.21-.49-.33-.79-.33h-1.11c-.29,0-.58-.12-.79-.33-.21-.21-.33-.51-.33-.81V2.14c0-.3,.12-.59,.33-.81,.21-.21,.49-.33,.79-.33Z"/></svg>');
}
/* H6 numbered icon */
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-6 .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) h6 .collapse-indicator.collapse-icon svg {
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="10" height="10"/><path d="M0,1H1.11v3.43H3.33V1h1.11V9h-1.11v-3.43H1.11v3.43H0V1Zm6.67,0h2.22c.29,0,.58,.12,.79,.33,.21,.21,.33,.51,.33,.81v.57h-1.11v-.57h-2.22v2.29h2.22c.29,0,.58,.12,.79,.33,.21,.21,.33,.51,.33,.81v2.29c0,.3-.12,.59-.33,.81-.21-.21-.49-.33-.79-.33h-2.22c-.29,0-.58-.12-.79-.33-.21-.21-.33-.51-.33-.81V2.14c0-.3,.12-.59,.33-.81,.21-.21,.49-.33,.79-.33Zm0,4.57v2.29h2.22v-2.29h-2.22Z"/></svg>');
}
/* Collapsed state colors */
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-1 .is-collapsed .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) .is-collapsed h1 .collapse-indicator.collapse-icon svg {
background-color: var(--h1-accent-color);
color: var(--h1-accent-color);
}
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-2 .is-collapsed .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) .is-collapsed h2 .collapse-indicator.collapse-icon svg {
background-color: var(--h2-accent-color);
color: var(--h2-accent-color);
}
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-3 .is-collapsed .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) .is-collapsed h3 .collapse-indicator.collapse-icon svg {
background-color: var(--h3-accent-color);
color: var(--h3-accent-color);
}
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-4 .is-collapsed .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) .is-collapsed h4 .collapse-indicator.collapse-icon svg {
background-color: var(--h4-accent-color);
color: var(--h4-accent-color);
}
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-5 .is-collapsed .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) .is-collapsed h5 .collapse-indicator.collapse-icon svg {
background-color: var(--h5-accent-color);
color: var(--h5-accent-color);
}
body:not(.collapse-icon-restore) .is-live-preview .HyperMD-header-6 .is-collapsed .collapse-indicator.collapse-icon svg,
body:not(.collapse-icon-restore) :is(.markdown-rendered, .markdown-preview-view) .is-collapsed h6 .collapse-indicator.collapse-icon svg {
background-color: var(--h6-accent-color);
color: var(--h6-accent-color);
}
Version with the default collapse icon
CSS snippet
Border_theme_heading_level_indicators_default_collapse_icons.css (3.7 KB)
/* Credit: Border theme by Akifyss: https://github.com/Akifyss/obsidian-border */
/* ========== SETTINGS ========== */
body {
/* HEADING INDICATORS: 1 = show colored bar | 0 = hide */
--h1-indicator: 1;
--h2-indicator: 1;
--h3-indicator: 1;
--h4-indicator: 1;
--h5-indicator: 1;
--h6-indicator: 1;
/* Heading colors */
--h1-accent-color: var(--color-red);
--h2-accent-color: var(--color-orange);
--h3-accent-color: var(--color-yellow);
--h4-accent-color: var(--color-green);
--h5-accent-color: var(--color-blue);
--h6-accent-color: var(--color-purple);
}
/* ====== Base Heading Styles ====== */
.markdown-rendered > :is(h1,h2,h3,h4,h5,h6),
.markdown-preview-sizer > div > :is(h1,h2,h3,h4,h5,h6) {
position: relative;
padding-left: 12px;
}
/* Heading collapse positioning - keep chevron outside the indicator */
.markdown-preview-view .heading-collapse-indicator,
.is-live-preview .HyperMD-header .collapse-indicator.collapse-icon {
transform: translateX(-16px);
}
/* ====== Colored Heading Indicators ====== */
.is-live-preview .HyperMD-header-1::before,
.is-live-preview .HyperMD-header-2::before,
.is-live-preview .HyperMD-header-3::before,
.is-live-preview .HyperMD-header-4::before,
.is-live-preview .HyperMD-header-5::before,
.is-live-preview .HyperMD-header-6::before {
margin-right: 6px;
content: " ";
display: inline-block;
width: 3px;
border-radius: var(--radius-m);
transform: translateY(4px);
}
.markdown-rendered > h1::before,
.markdown-rendered > h2::before,
.markdown-rendered > h3::before,
.markdown-rendered > h4::before,
.markdown-rendered > h5::before,
.markdown-rendered > h6::before,
.markdown-preview-sizer > div > h1::before,
.markdown-preview-sizer > div > h2::before,
.markdown-preview-sizer > div > h3::before,
.markdown-preview-sizer > div > h4::before,
.markdown-preview-sizer > div > h5::before,
.markdown-preview-sizer > div > h6::before {
content: " ";
display: inline-block;
width: 3px;
border-radius: var(--radius-m);
position: absolute;
top: 4px;
left: 3px;
}
/* Indicator heights and colors per level */
.is-live-preview .HyperMD-header-1::before,
.markdown-rendered > h1::before,
.markdown-preview-sizer > div > h1::before {
height: calc(1.2em - 8px);
background-color: var(--h1-accent-color);
opacity: var(--h1-indicator);
}
.is-live-preview .HyperMD-header-2::before,
.markdown-rendered > h2::before,
.markdown-preview-sizer > div > h2::before {
height: calc(1.2em - 8px);
background-color: var(--h2-accent-color);
opacity: var(--h2-indicator);
}
.is-live-preview .HyperMD-header-3::before,
.markdown-rendered > h3::before,
.markdown-preview-sizer > div > h3::before {
height: calc(1.3em - 8px);
background-color: var(--h3-accent-color);
opacity: var(--h3-indicator);
}
.is-live-preview .HyperMD-header-4::before,
.markdown-rendered > h4::before,
.markdown-preview-sizer > div > h4::before {
height: calc(1.4em - 8px);
background-color: var(--h4-accent-color);
opacity: var(--h4-indicator);
}
.is-live-preview .HyperMD-header-5::before,
.is-live-preview .HyperMD-header-6::before,
.markdown-rendered > h5::before,
.markdown-rendered > h6::before,
.markdown-preview-sizer > div > h5::before,
.markdown-preview-sizer > div > h6::before {
height: calc(1.5em - 8px);
}
.is-live-preview .HyperMD-header-5::before,
.markdown-rendered > h5::before,
.markdown-preview-sizer > div > h5::before {
background-color: var(--h5-accent-color);
opacity: var(--h5-indicator);
}
.is-live-preview .HyperMD-header-6::before,
.markdown-rendered > h6::before,
.markdown-preview-sizer > div > h6::before {
background-color: var(--h6-accent-color);
opacity: var(--h6-indicator);
}
Start with H2 (my pick)
With manual tweaks to align H1 collapse icon with collapse icons of H2-H6.
Works with the Minimal theme, might need adjusting if using another theme.
CSS snippet
Border_theme_heading_level_indicators_default_collapse_icon_starting_with_H2.css (4.3 KB)
/* Credit: Border theme by Akifyss: https://github.com/Akifyss/obsidian-border */
/* ========== SETTINGS ========== */
body {
/* HEADING INDICATORS: 1 = show colored bar | 0 = hide */
--h1-indicator: 0;
--h2-indicator: 1;
--h3-indicator: 1;
--h4-indicator: 1;
--h5-indicator: 1;
--h6-indicator: 1;
/* Heading colors */
--h2-accent-color: var(--color-red);
--h3-accent-color: var(--color-orange);
--h4-accent-color: var(--color-yellow);
--h5-accent-color: var(--color-green);
--h6-accent-color: var(--color-blue);
}
/* ====== Base Heading Styles ====== */
.markdown-rendered > :is(h2,h3,h4,h5,h6),
.markdown-preview-sizer > div > :is(h2,h3,h4,h5,h6) {
position: relative;
padding-left: 12px;
}
/* Heading collapse positioning - keep chevron outside the indicator */
.markdown-preview-view .heading-collapse-indicator,
.is-live-preview .HyperMD-header .collapse-indicator.collapse-icon {
transform: translateX(-16px);
}
/* Align H1 collapse icon with H2-6 collapse icons in Live Preview */
.markdown-preview-view h1 .heading-collapse-indicator,
.is-live-preview .HyperMD-header-1 .collapse-indicator.collapse-icon {
transform: translateX(-10px);
}
/* Align H1 collapse icon with H2-6 collapse icons in Reading view */
.markdown-preview-view h1 .heading-collapse-indicator {
transform: translateX(-4px);
}
/* ====== Colored Heading Indicators ====== */
.is-live-preview .HyperMD-header-1::before,
.is-live-preview .HyperMD-header-2::before,
.is-live-preview .HyperMD-header-3::before,
.is-live-preview .HyperMD-header-4::before,
.is-live-preview .HyperMD-header-5::before,
.is-live-preview .HyperMD-header-6::before {
margin-right: 6px;
content: " ";
display: inline-block;
width: 3px;
border-radius: var(--radius-m);
transform: translateY(4px);
}
.markdown-rendered > h1::before,
.markdown-rendered > h2::before,
.markdown-rendered > h3::before,
.markdown-rendered > h4::before,
.markdown-rendered > h5::before,
.markdown-rendered > h6::before,
.markdown-preview-sizer > div > h1::before,
.markdown-preview-sizer > div > h2::before,
.markdown-preview-sizer > div > h3::before,
.markdown-preview-sizer > div > h4::before,
.markdown-preview-sizer > div > h5::before,
.markdown-preview-sizer > div > h6::before {
content: " ";
display: inline-block;
width: 3px;
border-radius: var(--radius-m);
position: absolute;
top: 4px;
left: 3px;
}
/* Indicator heights and colors per level */
.is-live-preview .HyperMD-header-1::before,
.markdown-rendered > h1::before,
.markdown-preview-sizer > div > h1::before {
height: calc(1.2em - 8px);
background-color: var(--h1-accent-color);
opacity: var(--h1-indicator);
}
.is-live-preview .HyperMD-header-2::before,
.markdown-rendered > h2::before,
.markdown-preview-sizer > div > h2::before {
height: calc(1.2em - 8px);
background-color: var(--h2-accent-color);
opacity: var(--h2-indicator);
}
.is-live-preview .HyperMD-header-3::before,
.markdown-rendered > h3::before,
.markdown-preview-sizer > div > h3::before {
height: calc(1.3em - 8px);
background-color: var(--h3-accent-color);
opacity: var(--h3-indicator);
}
.is-live-preview .HyperMD-header-4::before,
.markdown-rendered > h4::before,
.markdown-preview-sizer > div > h4::before {
height: calc(1.4em - 8px);
background-color: var(--h4-accent-color);
opacity: var(--h4-indicator);
}
.is-live-preview .HyperMD-header-5::before,
.is-live-preview .HyperMD-header-6::before,
.markdown-rendered > h5::before,
.markdown-rendered > h6::before,
.markdown-preview-sizer > div > h5::before,
.markdown-preview-sizer > div > h6::before {
height: calc(1.5em - 8px);
}
.is-live-preview .HyperMD-header-5::before,
.markdown-rendered > h5::before,
.markdown-preview-sizer > div > h5::before {
background-color: var(--h5-accent-color);
opacity: var(--h5-indicator);
}
.is-live-preview .HyperMD-header-6::before,
.markdown-rendered > h6::before,
.markdown-preview-sizer > div > h6::before {
background-color: var(--h6-accent-color);
opacity: var(--h6-indicator);
}
/* Remove indent for H1 headings in live preview */
.is-live-preview .HyperMD-header-1 {
padding-left: 0 !important;
}
/* Remove margin from the ::before pseudo-element for H1 in live preview */
.is-live-preview .HyperMD-header-1::before {
margin-right: 0;
}