list: custom

view source

Fully customize your list-item markers, with either characters or counters.

use-name

scut-list-custom

type

mixin only

arguments

$content

default

"\2022" (bullet)

A character to mark list items; or enter count to indicate that you want to use a counter, optionally followed by 1) a string to follow the counter, and 2) a list-style-type for the counter. See examples.
$marker-width

default

0.75em

A width for the list-item marker-space — a.k.a the left-margin of the list-item content.
$pad
Padding to the left of the list-item marker.
$no-margin

default

false

If true, top and bottom margins will be removed from the list. Note that the default here is false, unlike for the other list mixins.

@content

A content block passed to this mixin will be applied to the list-item markers.

This utility creates the list-item marker as an absolutely positioned :before psuedo-element, which can be given any $content you'd like and styled just like any other element.

Pass a string or unicode value as $content and things should explain themselves. Consider using scut-characters.

Or if you want a counter, pass count, optionally followed by 1) a string to follow the counter (e.g. in this list I'm using ")" after the counter), and 2) a list-style-type for the counter (refer to MDN's reference list).

Spacing is set with the $marker-width and $pad arguments. And any amount of customization can happen in the @content block.

Refer to the examples, please, for further clarification. Please.

example

SCSS

.eg-list-custom-1 {
  @include scut-list-custom {
    color: $eg-light;
  }
}
.eg-list-custom-2 {
  @include scut-list-custom("\00bb", 1.3em, 1em);
}
.eg-list-custom-3 {
  @include scut-list-custom(count, 2em, 2em);
}
.eg-list-custom-4 {
  @include scut-list-custom(count ")" lower-alpha, 1.5em) {
    color: $eg-dark;
    font-size: 1.5em;
    font-weight: bold;
    top: -0.25em;
  }
  & > li + li {
    margin-top: 1em;
  }
}

compiled CSS

.eg-list-custom-1 {
  padding-left: 0.75em;
  list-style-type: none;
}
.eg-list-custom-1 > li {
  position: relative;
}
.eg-list-custom-1 > li:before {
  content: "•";
  display: block;
  position: absolute;
  top: 0;
  left: -0.75em;
  width: 0.75em;
  color: #9AE9FF;
}

.eg-list-custom-2 {
  padding-left: 2.3em;
  list-style-type: none;
}
.eg-list-custom-2 > li {
  position: relative;
}
.eg-list-custom-2 > li:before {
  content: "»";
  display: block;
  position: absolute;
  top: 0;
  left: -1.3em;
  width: 1.3em;
}

.eg-list-custom-3 {
  padding-left: 4em;
  list-style-type: none;
}
.eg-list-custom-3 > li {
  position: relative;
  counter-increment: scutlistcounter;
}
.eg-list-custom-3 > li:before {
  content: counter(scutlistcounter);
  display: block;
  position: absolute;
  top: 0;
  left: -2em;
  width: 2em;
}

.eg-list-custom-4 {
  padding-left: 1.5em;
  list-style-type: none;
}
.eg-list-custom-4 > li {
  position: relative;
  counter-increment: scutlistcounter;
}
.eg-list-custom-4 > li:before {
  content: counter(scutlistcounter,lower-alpha) ")";
  display: block;
  position: absolute;
  top: 0;
  left: -1.5em;
  width: 1.5em;
  color: #002834;
  font-size: 1.5em;
  font-weight: bold;
  top: -0.25em;
}
.eg-list-custom-4 > li + li {
  margin-top: 1em;
}

Result

short item
medium item medium item medium item medium item
long item long item long item long item long item long item long item long item long item long item long item long item long item

short item
medium item medium item medium item medium item
long item long item long item long item long item long item long item long item long item long item long item long item long item

short item
medium item medium item medium item medium item
long item long item long item long item long item long item long item long item long item long item long item long item long item

short item
medium item medium item medium item medium item
long item long item long item long item long item long item long item long item long item long item long item long item long item