Applying a CSS snippet to headings

Custom CSS & Theme Design
1

What I’m trying to do

I have this CSS snippet, which works exactly how I want it to:

/* Properties of the virtual link in reading mode (no underline) */
.markdown-preview-view .glossary-entry.virtual-link a {
color: inherit;
text-decoration: none; / No underline in reading mode */
}

/* Properties of the virtual link in live preview mode (underlined) */
.markdown-source-view .glossary-entry.virtual-link a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.245em;
text-decoration-color: #885cf5;
}

/* Properties of the virtual link when hovered */
.glossary-entry.virtual-link a:hover {
color: #885cf5;
}

/* Properties of the virtual link in callouts (match reading view) */
.callout .glossary-entry.virtual-link a {
color: inherit;
text-decoration: none; / No underline in callouts */

}

What i want to do is add headings to this list so that, in (all) modes (but esp. live preview mode), virtual links render the way they do in reading mode:

.markdown-preview-view .glossary-entry.virtual-link a {
color: inherit;
text-decoration: none; / No underline in reading mode */}

without interfering with (or by emulating) this snippet:

h3, h4, h5, h6 {
    text-decoration: underline !important;
}


.cm-header-3 {
    text-decoration: underline !important;
}

.cm-header-4 {
    text-decoration: underline !important;
}

.cm-header-5 {
    text-decoration: underline !important;
}

.cm-header-6 {
    text-decoration: underline !important;
}

Things I have tried

I have tried different variations including ways I’ve found other people refer to headings:

.cm-header-3; .markdown-source-view h3; and .HyperMD-header-3

I’ve tried with text decoration colours, using a similar format to the live preview snippet, but with a white underline:

    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.245em;
    text-decoration-color: #E1E0E0;
}

I’ve tried adding !important, for example:

/* Properties of headings in live preview mode (underline present) */
.HyperMD-header-3 .glossary-entry.virtual-link a {
    color: inherit;
    text-decoration: underline !important;
}

Here are some examples of entire scripts I’ve tried:

/* Properties of headings in live preview mode (match reading mode) */
.cm-header-3 .glossary-entry.virtual-link a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.245em;
    text-decoration-color: #E1E0E0;
}

/* Properties of headings in live preview mode (underline present) */
.markdown-source-view h3 .glossary-entry.virtual-link a {
    color: inherit;
    text-decoration: underline !important;
}

/* Properties of headings in live preview mode (underline present) */
.HyperMD-header-3 .glossary-entry.virtual-link a {
    color: inherit;
    text-decoration: underline !important;
}

If someone could help me understand what I should be writing, and why these aren’t working, I’d really appreciate it.

2

If I’m understanding your goal correctly, this will take care of all heading levels in the editor (source mode and live preview):

.HyperMD-header .glossary-entry.virtual-link a {
  color: inherit;
  text-decoration: none; /* or underline */
}