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: ... ;
}