Targeting tags with specific text

[ariehen]

Custom #tags in the editor need a bit more work.

Hopefully these topics:

How do I fix this border around tags in CSS?

I think you’ll have to play around with the .cm-hashtag-begin and .cm-hashtag-end a bit to see how it goes. Tags in the editor are a bit of a chore. They have a begin, the tag text area, and an end. [Screenshot 2024-07-15 at 9.26.24] For example, using: a.tag, .cm-hashtag { font-weight: 550; line-height: 1; color: var(--text-on-accent); background: #1F0000; box-shadow: none; padding: 3.5px 4px; border: 2px solid #F83E43; /*border-radius: 8px;*/ transit…

Proper CSS for tags in Live Preview

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 borde…

and this Discord discussion (scroll down to FireIsGood’s solution as well) can help.