Customizing Numbered Lists

Create stylized numbered lists that matches the brand of your website. Learn to create rounded numbers with backgrounds, or add in “Step” before each number.

Bulleted Lists

Looking to style a bulleted list instead of a numbered list? Become a member of the Code Curious community and have access a bunch of premium tutorials, like this one on bulleted lists.

---

Overview

Let’s learn how to customize our numbered lists in Squarespace. In this tutorial, we’ll:

1. Create a numbered list

2. Targeting a Numbered List

3. Adjust the list margin

4. Rounded and colored list items

5. Turning list items into steps

Create a Numbered List

For us to customize a numbered list, we first have to create a numbered list. We can easily do that either by typing "1." on a new line or by highlighting some text and selecting the “Numbered List” toggle.

Targeting a Numbered List

The browser default for list items is the ::marker pseudo-element. However, Squarespace has their own way of creating numbered items, so they use a different selector.

To target the list items in Squarespace, we use the following selector:

ol[data-rte-list] li>:first-child:before{

}

This is quite a complex selector, but here are the components:

• ol | Ordered List - Each li, list item, with an ordered list is numbered.

• data-rte-list | custom Squarespace attribute - A Squarespace-specific selector that targets lists created using the rte or rich-text-editor

• li | list item - Each numbered item with the ordered list

• :first-child | pseudo-class - targets the first child element

• :before | pseudo-element - creates a new element as the first child of a given selector.

Adjusting Numbered List Spacing

Spacing in numbered lists gets a little weird, because there are multiple properties that have to be adjusted in unison.

1. First, the entire list is pushed over to the right using some padding.

2. Next, each number is moved back to the left using some negative margin.

3. Finally, the number is given a minimum width so numbers with more characters (i.e. 10 has 2 characters and 9 has 1), don’t mess with the alignment of the content within the list.

To adjust the spacing of the a numbered list, you must adjust all three of these values equally.

ol[data-rte-list]{
  padding-inline-start: 40px;
}
ol[data-rte-list] li>:first-child:before{
  margin-left: -40px;
  min-width: 40px;
}

CSS Counter Function

The main component of any numbered list is the counter() function, which returns the number of the current item.

Using the counter function on the content property, Squarespace increments the items in a numbered list:

ol[data-rte-list] li>:first-child:before{
  content: counter(rte-list);
}

rte-list is the “name” that Squarespace uses. This counter will return the number of the given list-item. We can add additional text in here, between parenthesis. For example, this would add a period after each number in the list:

ol[data-rte-list] li>:first-child:before{
  content: counter(rte-list) '.';
}

Rounded and colored list items

Okay, the fun stuff. Now that we know the basic components of a numbered list, we can target a list item and adjust it’s styles.

ol[data-rte-list]{
  padding-inline-start: 40px;
}
ol[data-rte-list] li{
  position:relative;
}
ol[data-rte-list] li>:first-child:before{
  /*Position*/
  margin-left: -40px;
  min-width: 25px;
  height:25px;
  left:0;
  top:2px;
  position:absolute;
  display:inline-grid;
  place-items:center;

  /*Styles*/
  border: 1px solid;
  border-radius: 50%;
  font-size: .9rem;
  line-height:0;
  background: #6338ff;
  color:white;
}

In this bit of CSS, I can use the border-radius property to round each numbered item and apply a background to them. I’ve also set the min-width and height to be the exact same so I get a perfect circle.

I’ve also targeted the list items and positioned them absolutely. This way, I can use the top and left properties to align the numbered item exactly where I want it.

Turning list items into steps

In this bit of Custom CSS, I’ve added some additional text around the counter() function, and changed some of the styling of the font. I’ve continued to use position: absolute; so that I can use the top and left properties to fine-tune the placement of the text.

ol[data-rte-list]{
  padding-inline-start: 60px;
}
ol[data-rte-list] li{
  position:relative;
}
ol[data-rte-list] li>:first-child:before{
  /*Content*/
  content: 'step ' counter(rte-list) '.';
  
  /*Position*/
  margin-left: -60px;
  min-width: 60px;
  left:0px;
  top:0.9rem;
  position:absolute;

  /*Styles*/
  font-size: .9rem;
  line-height:0;
  text-align:start;
  font-style: italic;
}

I hope this helps! Let me know if you have any questions in the comments below.