Hi all! I wanted to show you how we styled the numbers in the numbered lists in our help center. You can do something style the numbers like this Maps help article:
Instructions
- Drop an embed onto your page. In our case it’s a Collection page with a rich text in it.
- Add this code to the embed. (You can also add the custom code to the page settings)
<style>
/* This removes all list styling, including numbers */
.rich-text ol {
list-style-type: none;
position: relative;
}
/* This forces the step counter below to start incrementing */
.rich-text ol li {
counter-increment: step-counter;
}
/* This adds a step counter before each list item in a numbered list. Also includes styling for the numbers */
.rich-text ol li::before {
content: counter(step-counter);
position: absolute;
left: 0;
width: 26px;
height: 26px;
font-size: 14px;
color: white;
font-weight: 500;
background-color: #333;
border-radius: 99px;
text-align: center;
line-height: 28px;
}
</style>
.rich-text above is the classname we have on our rich text element. Note: this CSS might override other styling you have on All List Items tag inside your projects.
Fixing multiple lists and different starting points
What if you have multiple lists on the page that start at custom values? Like this Google Verification article:
You can create custom start points for lists in a Rich Text by typing in a number to start the list at that number.
Add this additional custom code to make the counter work correctly in this case:
<style>
/* Resets all counters on the page so it starts from 1 and continues even if there are multiple lists */
.rich-text {
counter-reset: step-counter;
}
/* Resets the lists that don't start from a custom value */
.rich-text ol:not([start]) {
counter-reset: step-counter;
}
</style>
Hopefully this helps to customize your list styles!