Colored Bullet Points

Design help General
1

Hi there,

how can i change the color of a bullet point. i don’t want to use a background image.

thanks
toby

2

Easy pease with Custom CSS:

li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
}

Link: Custom colored bullets - JSFiddle - Code Playground

5 Likes
3

Ah that’s a better solution than mine (: Although don’t you print an extra bullet with your solution? You’d have to mask the original bullet beforehand no?

I use this:

This will make it green

li
{
  color: #0F0;
}

This will prevent the text from being green

li p
{
  color: #000;
}

Not ideal. More often I use an SVG in bg for bullets

1 Like
4

True, it’s done with the

list-style: none;

And than the character can be chosen in the list:before. I figured, as he wanted to change colour, he’s probably going to ask next what or how to change the symbol :wink:

2 Likes
5

That’s clever (: So let’s as well link to the complete list of unicode characters so we have all the details taken care of :wink:

#teamwork
5 Likes
6

hi,

thanks for your ideas. it will work only through the custom code option? not directly in webflow?

7

True. The list elements have little styling you can apply right in Webflow. For the rest, use custom code. Note that you can put the custom code i the custom code tab of the site dashboard but you can also declare it in an HTML widget in the page you need it, close to your list. This way it will only affect lists on the page, when the forst solution apply it side wide.

8

OK. Thanks very much vincent :slight_smile: