Custom css for bullet background color

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:

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?

  • 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.

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:

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


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

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

1 Like

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