CSS Entities (Changing Default Bullet Types)

Tips & TricksFree

Jul 20

Have you ever used the content:””; property in order to create a pseudo-element? Well there are tons of things you can do instead of just using this property for a blank element to create an image or video overlay.

Like, say, changing the default bullet icons in Squarespace.

Text 1
Text 2
Text 3

Just paste this into your Custom CSS area:

ul[data-rte-list] li>:first-child:before{
  content:"\21A3" !important;
  }

This is a great way to pull in icons into your website without needing to bring in SVG icons (which can be a nightmare real quick if you’re just trying to do something simple). These text characters are great to use instead.

I’ve used these in a number of plugins and I would highly recommend checking them all out.

Check them out