Unordered Lists Don’t Have to Be Boring

7^th July, 2020

You see them everywhere, the “Plain Jane” black dots next to an unordered list. These little dots (known as markers) often seem to miss the attention of getting a little stylistic flair, but they don’t have to! We’re going to look at two ways you can make markers fall in line with your sites design or provide a little character.

Simple Colouring

Please note, for this first example the current browser support is very limited, check Can I Use for a breakdown of where this can currently work. Because of this, both before & after below may look the same!

The first example, is a nice, quick way of making these markers blend with the colour palette of your site. We can do this by making use of the marker pseudo-element. If we target this marker pseudo-element we can simply pass color as a style:

li::marker {
  color: #d84548;
}

Before:

• This is
• An unordered
• List

After:

• This is
• An unordered
• List

As you can see, it’s a simple change which helps the list feel more naturally a piece of your site.

To give a more unique feel, you can add images as your marker for a list. For a recent project, we took part of a client’s logo, turning the marker into a crown. This gave an elegant, on brand feel to lists across the site.

In our example here, we’re going to use the Tidy Design TD logo.

Here’s a look at the code we’re going to use:

ul {
  /* Decrease the current default padding-left */
  padding-left: 1.5em;
  /* Remove the current default marker */
  list-style: none;
}

li {
  /* Add a min height the li, so the full image can be seen */
  min-height: 20px;
  /* Space out the li */
  margin-bottom: .75em;
  /* Space out the li content from the icon */
  padding-left: 2em;
  /* Add the icon */
  background-image: url('image-path-here/tidy-logo.svg');
  /* Set the size of the new icon marker */
  background-size: 20px;
  /* Make it so it doesn't repeat */
  background-repeat: no-repeat;
  /* Nudge the icon marker down slightly to center */
  background-position: 0 4px;
  /* Set a line height for the li */
  line-height: 1.6;
}

The styling above gives us a list which looks like this:

• This is
• An unordered
• List

Now, that looks a lot better than a little black dot doesn’t!

Bonus Round

Working with SASS/SCSS? Here’s a little mixin for you to use:

@mixin ul-marker-logo() {
  padding-left: 1.5em;
  list-style: none;

  li {
    min-height: 20px;
    margin-bottom: .75em;
    padding-left: 2em;
    // Edit path to your logo
    background-image: url('image-path-here/tidy-logo.svg');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 0 4px;
    line-height: 1.6;
  }
}

To use this mixin just call it inside a ul:

ul {
  @include ul-marker-logo;
}

If you’ve any questions on this, please send us an email and we’ll get back to you!

Luke