^Content List helpers

List markers

Customize markers using inline style="--list-marker:..." on <ul>/<ol> or even individual <li>:

you
can
make
really
cool markers
with
Blades

How it works:

ul,
ol {
  &[style*="--list-marker:"] {
    list-style-type: var(--list-marker);

    > li {
      list-style-type: inherit;
    }
  }
  li[style*="--list-marker:"] {
    list-style-type: var(--list-marker);
  }
  li[data-marker]::marker {
    content: attr(data-marker) " "; /* ⚠️ Chrome and Firefox only */
  }
}

Markerless

.markerless removes markers and reduces padding:

1️⃣ so you can use
2️⃣ emojis or images
3️⃣ instead of bullets

How it works:

ul,
ol {
  &.markerless {
    padding-inline-start: 1.25rem;

    li {
      list-style: none;
    }
  }
}

Unlist

.unlist removes list styling at all:

One:
1
Two:
2
Three:
3

.unlist-all removes styling from all nested lists too.

How it works:

ul,
ol {
  &.unlist,
  &.unlist-all,
  .unlist-all & {
    padding-inline-start: 0;

    > li {
      list-style: none;
    }
  }
}