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:

Here are the basic codes from this tutorial:

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

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

Check out my list of Squarespace-compatible unicode characters for your bullet point list at insidethesquare.co/unicode

/* 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}

Did you know that you can change the bullet points for specific font styles too? I covered that in an older tutorial, available here: insidethesquare.co/squarespace-tutorials/bullet-points