How To Customize Bullet Points in Squarespace

content block

Sep 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, then the color.

Then you'll learn how to change one bullet point at a time, even and odd ones, and even create a pattern.

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

/* change the bullet point symbol to a unicode character */

li>*:first-child::before{content:"➜"!important}

/* change color for every bullet point */

 li>*:first-child::before {color:#A1D9DD; }

/* change an individual bulet point */

 li:nth-of-type(1)>*:first-child::before {color:#A1D9DD; }

/* alternate colors for even and odd */

 li:nth-of-type(odd)>*:first-child::before {color:#A1D9DD; }

 li:nth-of-type(even)>*:first-child::before {color:#F5957F; }

/* create a pattern */

li:nth-of-type(3n+1)>*:first-child::before {color:#A1D9DD; }

li:nth-of-type(3n+2)>*:first-child::before {color:#F5957F; }

li:nth-of-type(3n)>*:first-child::before {color:#EDD17D}

font