Changing tag styling, not quite working

[carljoseph]

Trying to make tags into a "pill style". I've got most of it working, except it looks different in editor/read mode.

All looking good in preview/read mode. Except in editor mode the # and text portion of the tag are separated. Any ideas?

Here's how it currently looks

Here's my CSS snippet

a.tag,
.editor .cl-hashtag,
.markdown-source-view.mod-cm6 .cm-hashtag,
.cm-s-obsidian .cm-formatting.cm-hashtag,
.cm-s-obsidian .cm-quote.cm-hashtag,
.cm-s-obsidian .cm-hmd-codeblock.cm-hashtag {
  background: #e3e3e3;
  padding: 2px 8px;
  margin: 0 0;
  border-radius: 14px;
  text-align: center;
  color: var(--red-5);
  border: var(--red-5) 0.5px solid;
}

a.tag:hover {
  background: #e3e3e3;
  color: var(--blue-5);
}

[ebullient]

I'll tuck my tag styling under style settings so you can turn it off.. which may make it easier for you to customize using core styles.

[ebullient]

I've released that change in 0.6.1.
Now that the css for tags has been regrouped (and can be turned off), it may give you some ideas for how to adjust what you've tried..

obsidian-theme-ebullientworks/theme.css

Line 912 in 938d0b0

body:not(.ebullientworks-nix-tags) {