Proper CSS for tags in Live Preview

[Freek]

I’m looking to give tags the same looks in the Live Preview as they have in Reading.

Things I have tried

.cm-s-obsidian span.cm-hashtag,
.tag {
    color: #999999;
    background-color: #333333;
    border: none;
    padding: 1px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 14px;
}

.cm-s-obsidian span.cm-tag-M,
.tag[href="#M"] {
    background-color: darkred;
    color: lightgray;
}

.cm-s-obsidian span.cm-tag-S,
.tag[href="#S"] {
    background-color: darkorange;
    color: black;
}

.cm-s-obsidian span.cm-tag-C,
.tag[href="#C"] {
    background-color: darkgreen;
    color: lightgray;
}

.cm-s-obsidian span.cm-tag-W,
.tag[href="#W"] {
    background-color: rgba(128, 128, 128, 0.212);
    color: gray;
}

This results in:

What I’m trying to do

Actual desired result I’m trying to get to (this is a screenshot of what my reading view looks like, but I want to replicate this in the preview):

[efemkay]

for tags in editing view (live preview/source mode), you would have to use a different css selector i.e. .cm-s-obsidian span.cm-hashtag-begin { } and .cm-s-obsidian span.cm-hashtag-end { }

/* for background, font color. apply to live preview and reading view */
/* change the span.cm-tag-[label] and href=[tag] accordingly */
.cm-s-obsidian span.cm-tag-S,
.tag[href="#S"] {
	color: ... ;
	background-color: ... ;
}

/* for hash (#) part of the tag in live preview */
/* use it for padding, and border */
.cm-s-obsidian span.cm-hashtag-begin {
	padding-left: ... ;
	border-top-left-radius: ... ;
	border-bottom-left-radius: ... ;
}

/* for the word (after the #) part of the tag in live preview */
/* use it for padding, and border */
.cm-s-obsidian span.cm-hashtag-end {
	padding-right: ... ;
	border-top-right-radius: ... ;
	border-bottom-right-radius: ... ;
}

[Freek]

Thank you so much! Great solution to use those begin and end classes to format the left and right separately