How do I fix this border around tags in CSS?

[mws]

I admit, I’m a newbie when it comes to coding. I practically know next to nothing when it comes to the intermediates and advanced parts. However, Obsidian has been piquing my interest in coding A LOT as of late. I’ve been playing around here in Visual Studio Code and got some of the basics down, but now I’m venturing into some territory where I just feel stuck and don’t know what to do.

This is what I got:

It’s obvious it’s not doing what it’s supposed to be doing (which is wrapping around the entire tag, not just the top & bottom).

Here’s the code I have for it: (If need be, I can provide more code as I don’t know if this is all the code that is needed to achieve a fully-rounded border)

Any help is greatly appreciated!

[ariehen]

While screenshots are fine, pasting your CSS in a code block is recommended so folks can jump right in and offer suggestions.

[ariehen]

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.

---

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;*/
    transition: var(--transition-03);
    font-variation-settings: "wght" 550;
}

.markdown-source-view .cm-hashtag-begin {
    border-left: 2px solid #F83E43;
    padding-top: 1px;
    padding-right: 0px;
    padding-bottom: 3.5px;

}
.markdown-source-view .cm-hashtag-end {
    border-right: 2px solid #F83E43;
    padding-top: 1px;
    padding-bottom: 3.5px;
}

I get this (Live Preview):

Also, depending on what’s being changed, you may need to separate out the editor ( .cm-hashtag ) and rendered/Reading view ( a.tag ) if the paddings, etc., aren’t lining up when switching view modes.