A way to make the line-hover-indicator always visible, regardless on hover or not?

[who-took-hu4d]

I'm trying to hack together something that would solve this old request of getting there to be indented vertical lines to the left of content, depending on Header level. The plugin Heading Level Indent gets me some of the way there, by indenting the headers. It also adds classes to the headers and their content, that can be adjusted however. (Info on that in its ReadMe)

My rough idea is to steal the vertical lines that appear in this theme when you hover over a line, and just make them appear all the time. And then generate more of them, all slightly scooched to the left, for deeper headings.

I've dug through the CSS for this theme, and found the relevant sections on styling the indicator, found on line 7628 of the theme's CSS file (Can CTRL+F for ".line-hover-indicator"). What I haven't been able to figure out though is how it is A) Being generated in the first place. and B) How to make it permanent.

Copying Code here:

.line-hover-indicator .workspace-leaf-content:is([data-type="markdown"], [data-type="webviewer"]):not(:has(.document-search-container)) .markdown-preview-sizer>div:not(:has(.collapse-indicator, .mk-header)) {
    position: relative;
}

.line-hover-indicator .workspace-leaf-content[data-type="markdown"] .markdown-source-view .cm-content>div:not(:has(.mk-note-footer)):has(.cm-hmd-list-indent)::after,
.line-hover-indicator .workspace-leaf-content[data-type="markdown"] .markdown-source-view .cm-content>div:not(.image-embed, .mk-header, :has(.mk-note-footer, .collapse-indicator))::after,
.line-hover-indicator .workspace-leaf-content:is([data-type="markdown"], [data-type="webviewer"]):not(:has(.document-search-container)) .markdown-preview-sizer>div:is(.el-ul, .el-ol)::after,
.line-hover-indicator .workspace-leaf-content:is([data-type="markdown"], [data-type="webviewer"]):not(:has(.document-search-container)) .markdown-preview-sizer>div:not(:has(.collapse-indicator, .mk-header))::after {
    content: "";
    position: absolute;
    left: -12px;
    top: 3px;
    width: 3px;
    height: 0;
    border-radius: 10px;
    background: var(--hover-indicator-color);
    --hover-indicator-color: var(--text-faint);
    opacity: 1;
}

I am by no means an expert in CSS, or even really a novice. Besides some old classes I took in High School, the most CSS I've ever done is stealing stuff from Obsidian Themes to frankenstein into other things.

Anybody here have an idea how to go about doing this?