How To Customize Bullet Points in Squarespace

content block

Jun 10

Are you tired of using those same boring bullet points on your Squarespace website? Have you ever wished that customizing them was as easy as changing font color, style and something a little more unique than a dot?

Well, now it is!

With a few lines of CSS code, you can create gorgeous bullet point designs that will wow visitors to your site.

Not only are they eye-catching - they make navigating your site much easier and more intuitive for users.

In this tutorial, we’ll change the bullet point character and the color.

Be sure to watch the video below for step-by-step instructions, and keep scrolling for the codes below:

Swap the Dot for a Symbol

Use this code to replace the default bullet point with a unique Unicode character that matches your site’s style.

Full list of unicode characters → insidethesquare.co/unicode

/* change the bullet point symbol to a unicode character */
.sqs-block-html li>*:first-child::before{
content:"➜"!important
}

Add a Pop of Color

Customize the color of your bullet points to better match your branding or design aesthetic.

/* change the bullet point color */
.sqs-block-html li>*:first-child::before{
color: #a1d9dd
}

Style Your Sub-Items

This code changes the symbol used for second-level bullet points, perfect for multi-tiered lists.

/* change the second level bullet point*/
.sqs-block-html li > ul > li>*:first-child::before {
content:"⇢"!important
}
/* change the third level bullet point & lower */
.sqs-block-html li > ul > li > ul > li>*:first-child::before{
content:"⤏"!important
}

Complete Bullet Point Makeover

Combine all custom symbols and colors for a fully styled, multi-level bullet point list that stands out.

/* custom symbol & color for bullet points from insidethesquare.co */
.sqs-block-html li>*:first-child::before{
content:"➜"!important;
  color: #78bfc5; 
}
.sqs-block-html li > ul > li>*:first-child::before {
content:"⇢"!important;
  color: green; 
}
.sqs-block-html li > ul > li > ul > li>*:first-child::before{
content:"⤏"!important;
  color: purple; 
}

font