Custom css for bullet background color

Questions & Help
1

I’ll preface this by saying, this may not be possible :slight_smile:

What I’m looking to do is add something manually to a bullet to make its background color change across its length.

Right now I have the following in custom.css:

b.pauze {
  background-color: var(--ls-quaternary-background-color);
  padding: 8px 8px 8px 0px;
  font-size: 1.2rem;
  font-weight: 600;
}

Then in a bullet I’ll have:

[:b.pauze [:b.icon 🕯] "Pauze"]

Which looks like:

IMG_0464
IMG_04641640×625 57.2 KB

As you see I also have some bullets with more text.
I wish for that background color to extend further to the right. Adjusting the padding will do that, however it doesn’t take into account the amount of text I have.
I would like the background box to be the same width regardless of the amount of text in it.
The text shown is basically all the variety of text I want, so I’m not too worried about having it be a static value.

Is that even possible? And if so how do I achieve it?

2
  • One way is to:
    • add display: block;
    • then add some width, e.g.:
      • width: 300px;
      • width: 50%;
  • Another way is to:
    • replace b.pauze
    • with something like div.block-content-inner:has(b.pauze)
  • Many other ways, depending on the exact requirements.
2 Likes
3

Perfect!
Went with:

div.block-content-inner:has(b.pauze) {
  background-color: var(--ls-quaternary-background-color);
}
b.pauze {
  font-weight: 600;
  font-size: 1.2rem;
}

Don’t need that padding anymore :slight_smile:

4

You know you have to show us the result now, right @Siferiax? :wink:

2 Likes
5

Haha! Sure thing.
Here’s what it looks like now:

IMG_0482
IMG_04821640×645 67.5 KB

(Yes I found a free emoji and I liked it lol)

1 Like
6

Thank you for posting it ; ).
It looks nice, and helps separate the sections. I will keep it in mind as a good option.