Tags are duplicated custom css

[renorx]

Hello, can you please help me? I have a problem with my code. I created a tag called #TIP and added an emoji to it, but when I view it in editing mode, the tag duplicates itself. I am attaching the code and some images

.cm-s-obsidian span.cm-hashtag-begin {
  padding-left: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.cm-s-obsidian span.cm-tag-TIP,
.tag[href="#TIP"] {
  font-size: 0;
  padding: 0;
}

.cm-s-obsidian span.cm-tag-TIP:before,
.tag[href="#TIP"]:before {
  content: "🎈TIP";
  display: inline-block;
  font-size: 8pt;
  font-weight: 700;
  background-color: rgb(165, 29, 42);
  color: rgb(232, 230, 227);
  padding: 3px;
  border-radius: 3px;
  letter-spacing: -0.00ch;
  line-height: 1;
  margin-right: 2px;
}

.cm-s-obsidian span.cm-tag-TIP:after,
.tag[href="#TIP"]:after {
  display: none;
}

.cm-s-obsidian span.cm-hashtag-end {
  padding-right: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

[efemkay]

@renorx in editing, the class .cm-tag-TIP will appear twice in the html dom. first for the hashtag # and then another for the TIP word. that’s because obsidian distinguish the # hash symbol from the word (only in editing view).

use this modified version (including the :not(.cm-formatting)

.cm-s-obsidian span.cm-tag-TIP:not(.cm-formatting):before,
.tag[href="#TIP"]:before {
    ...
}

[renorx]

Thank you very much for your help.