Unrelated to the above, I would like to tell that I have been able to achieve the the following results
using this code
.cm-tag-important, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-important {
background-color: red;
border: none;
color: white !important;
font-size: var(âfont-size-tag);
text-decoration: none !important;
cursor: pointer;
}
.cm-tag-important:hover {
color: white;
background-color: var(âtext-accent-hover);
}
.cm-tag-obsidian, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-obsidian {
background-color: #4d3ca6;
border: none;
color: white !important;
font-size: var(âfont-size-tag);
text-decoration: none !important;
cursor: pointer;
}
.cm-tag-obsidian:hover {
color: white;
background-color: var(âtext-accent-hover);
}
.tag[href^="#obsidian"] {
background-color: #4d3ca6;
}
.tag[href^="#important"] {
color: white;
background-color: red;
}
So, maybe there is a work around for internal links too.