How to create custom bullet points in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In this tutorial, we are going to use a little simple CSS to create custom bullet points in Squarespace.

But we’re going to go a step further and customize them for each different text type!

That’s right - you can have a custom bullet point for your H1 or H3 or paragraph text - any text type can have a unique bullet point style.

The codes we are using are listed below, but be sure to check out the tutorial so you understand what part you need to change to make it work on your own site. 

Oh! The list of Unicode characters that I tested on my demo site on Chrome, Safari and a few mobile devices is available at insidethesquare.co/unicode

You can just copy and paste the character from that page into the code, placing it between the quotation marks.

Here are the codes:

All text types

ul li>*:first-child::before {content: "→";}

Heading One Text Example

ul li>h1:first-child::before {content: "→";}

Heading Three Text Example

ul li>h3:first-child::before {content: "→";}

Paragraph Text

ul li>p:first-child::before{content: "→";}

Change the color too

ul li>*:first-child::before {content: "→"; color: red}

Change the color & font size

ul li>*:first-child::before {content: "→"; color: re; font-size: 2rem}

Change the color, font, and add a rotation

ul li>*:first-child::before {content: "→"; color: red; transform: rotate(45deg)}