How To Customize Bullet Points in Squarespace

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}
 
insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

https://insidethesquare.co
Previous
Previous

How to customize the dropdown menu background in Squarespace

Next
Next

How to use vertical video in Squarespace 7.1