How to Turn Standard Bullet Points into Dashes, Arrows, or Emojis on Squarespace 7.1

21 Feb

Standard bullet points are functional, but they don't always match a high-end brand aesthetic. If you want to swap those generic circles for elegant dashes, modern arrows, or even a playful emoji, you can do it with a simple snippet of CSS.

In this tutorial, we’ll show you how to target Squarespace’s specific list styling to create custom "bullets" that work site-wide.

Why Use CSS Instead of Images?

While you can use images for bullet points, using text characters or Unicode symbols is better for your site's performance.

Faster Load Times: No extra image files to fetch.
Scalability: Symbols scale perfectly with your text size and color.
Accessibility: Screen readers handle text-based characters more reliably than decorative background images.

Step 1: Access Your Custom CSS

To get started, log into your Squarespace site and follow these steps:

Go to Website.
Scroll down to Website Tools.
Click on Custom CSS.

Step 2: Add the Code Snippet

Copy and paste the following code into your CSS editor:

  
    /* Custom Bullet Points */

ul[data-rte-list] li > :first-child:before {
  content: "\2012"; /* This is the code for a dash */
  margin-right: 10px; /* Optional: adds space after the symbol */
}
  

Step 3: Customize Your Symbol

The magic happens in the content: line. The snippet above uses \2012 (the Unicode for an En Dash), but you can swap this out for anything you like.

Option A: Using Unicode (Professional)

Unicode characters are standard for symbols like arrows or checkmarks. Replace \2012 with one of these popular options:

Right Arrow: \2192 ( → )
Checkmark: \2713 ( ✓ )
Square: \25AA ( ▪ )

Option B: Using Emojis (Playful)

If your brand is more casual, you can simply paste an emoji directly between the quotation marks.

Example: content: "👉";
Example: content: "✨";

Pro Tip: If you use an emoji, you might want to adjust the font-size within that same CSS block to ensure it aligns perfectly with your text.

Frequently Asked Questions

Will this affect my numbered lists?

No. This code specifically targets ul (Unordered Lists). Your ol (Ordered/Numbered Lists) will remain untouched.

Can I use a custom image instead?

This specific method is designed for text characters, Unicode, and emojis. Using images requires a different list-style-image property or a background-image hack.

Does this work on all Squarespace templates?

Yes, this targets the [data-rte-list] attribute, which is standard across Squarespace 7.1 and most 7.0 Fluid Engine blocks.

George Bleasdale