Inline readable tags (better flow)

Hi, I’ve been using tags in Obsidian frequently but never enjoyed the pill shapes or the preceding hashtags as they always affect the flow/readability of text.

Below is the best CSS solution I could come up with

Tags will appear as normal bold text (change the color from your theme settings) with a wavy underline to differentiate them from normal bold text or straight underlined links.

Sadly hashtags appear on reader mode, but I rarely use it as editor mode is the default one I use 99% of time.

CSS snippet:

.cm-hashtag, a.tag {
font-weight: 700 !important;
text-decoration: underline;
text-decoration-style: wavy;
line-height: 0.5em !important;
margin-top: -10px !important;
display: inline-block;
height: 0 !important ;
background: none !important;
border: 0 !important;
padding: 0 !important;



Here’s what I use — it makes tags look the same as links except without the underline.

/* Remove tag pills. 
Customized from original at 

- Change color to accent.
- Add underline?

	--tag-size: ;
	/*--tag-color: var(--color-base-100);*/
	/*--tag-color-hover: var(--color-base-100);*/
	--tag-decoration: underline;
	--tag-decoration-hover: underline;
	--tag-background: var(--color-base-00);
	--tag-background-hover: var(--color-base-00);
	--tag-border-color: var(--color-base-00);
	--tag-border-color-hover: var(--color-base-00);
	--tag-border-width: 0px;
	--tag-padding-x: 0em;
	--tag-padding-y: 0em;
	--tag-radius: 0em;
1 Like

Thank you. I like this a lot. Nice job.
Imma go hit up the Discord, see if any of the CSS magicians have a solution to the ‘Reading View’ issue.

@zam came up with a solution over on the Discord (#apperance) - Discord
It uses a font with an invisible #hashtag! Genius.

1 Like

Wow! A true genius! I have relatively good skills in css and thought this is impossible to achieve without javascript! That invisible font solution is something extraordinary