• English

Making and editing custom bullets in CSS

In this post, you will find some tips on how to make and edit custom bullets in CSS. You can place your own image as a bullet or define a checkmark bullet list while retaining the flexibility and sizing the bullets proportionally to the text.

An important note to start with

Before starting to build and customize the bullets, there is an important thing to remember. First and foremost, if you want to keep the possibility to just change the font size of the text and to automatically adjust the sizing of bullet points, forget about pixel values. Use the so called ’em’ values for size, padding, margins etc. This is based on the ‘M’ letter height and shows a percentage value relative to this height. So if you have the font size of 20px and you want to set the padding of 10px, that would mean 0.5em value or half of the font height. When you then increase the text size, the bullets will automatically adjust and change their own size accordingly.

The other thing to keep on your mind is that the CSS code for styling bullets is placed for the list item. Meaning you shouldn’t forget to add ‘li’ after the unordered list class in order to see all these changes in action.

.bullet-list li{
}

Using a custom image as a bullet

Let’s say that you want to use a fully custom bullets in CSS to create your list. For example, you would like the bullet itself to be your logo instead of a vector graphic, checkmark etc. There are a few ways to do that, but we will go through the most flexible and easiest one to set up. The end result where logo is used instead of bullets is shown below:

custom bullets in CSS

I assigned the class ‘bullet-list’ to this unordered list and used only CSS to style it. Before we get to the details on how to edit this, the final lines of code looked like this:

.bullet-list li{
   list-style: none;
   list-style-image: none;
   background: url(your URL to the picture here) no-repeat 0 .5em;
   background-size: .75em;
   padding-left: 1.1em; 
   margin-left: 0px; 
 }

.bullet-list ul{
   padding-left: 0px;
}

First we removed all the styling by assigning the ‘none’ values to list-style and list-style-image used for bullets.

.bullet-list li{
   list-style: none;
   list-style-image: none;
}

Then we applied the ‘background’ property and linked it to the image uploaded in the Media in WordPress. You set the no-repeat value in order to prevent the picture (in this case logo) to repeat and fill the section creating this unwanted pattern in the background.

.bullet-list li{
   background: url(your URL to the picture here) no-repeat 0 .5em;
   background-size: .75em;
 }

The default position of the bullet is in the top left corner. If you see that that’s not aligned with the text depending on your line height, you need to apply proper padding and reposition the bullet. That’s what 0 and 0.5em values within ‘background’ property after ‘no-repeat’ are there for. The first 0 refers to the left padding which stays as it is and the second one to the top padding, meaning it is shifting the bullet 0.5em down to line it properly with the text. Styling bullet list with the ‘background’ allows you to apply proper size of the bullet image using the ‘background-size’ property.

Adjusting the padding and spacing between the bullets and the text

If you want to adjust the left indent and space before the bullets, you should look at the left padding of the unordered list selector (‘ul’). Alternatively, you can change the left margin value on the list items (‘li’). Removing this padding from the unordered list looks like this:

.bullet-list ul{
   padding-left: 0px;
 }

If you change this padding to a positive value, you can get something that looks like this:

custom bullets in CSS

To adjust the space between the bullets and the text, you then change the left padding on the list items (‘li’):

.bullet-list li{
   padding-left: 1.1em;
}

By changing this padding, you can achieve different spacing after the bullets as shown below:

custom bullets in CSS

That’s it! Now when you go ahead and change the font size of the bullet list items, the bullets will act accordingly and change their size and position proportionally.

Creating circular checkmark bullets

There are many other ways how to create custom bullets in CSS. To style the bullet list and create checkmark lists for example, using purely shapes and lines in CSS, not images. We will take a look at the example below:

custom bullets in CSS

I assigned the class ‘bullet-list-checkmark’ to the unordered list and the final styling of the menu items in CSS then looked like this:

.bullet-list-checkmark li{
   list-style: none;
   list-style-image: none;
   padding-left: 1.5em;
   position: relative;
}

.bullet-list-checkmark li:before{
   content: " ";
   display: block;
   border: solid .5em red;
   border-radius: .5em;
   position: absolute;
   left: 0px;
   top: 20%;
}
 
.bullet-list-checkmark li:after{
   content: " ";
   display: block;
   width: .3em;
   height: .6em;
   border: solid white;
   border-width: 0 .145em .145em 0;
   position: absolute;
   left: .35em;
   top: 30%;
   -webkit-transform: rotate(45deg); 
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

.bullet-list-checkmark ul{
   padding-left: 0px;
}

Let’s go through it step by step. First we need to clear the formatting of the bullet list like in the previous example by setting the list-style and list-style-image to none. By adjusting the padding to the list items, we create some space between our future bullets and the text.

.bullet-list-checkmark li{
   font-size: 21px;
   list-style: none;
   list-style-image: none;
   padding-left: 1.5em;
   position: relative;
 }

Creating the circle for the checkmark

All the styling under li:before refer to the circle of the checkmark and all the elements under li:after refer to the checkmark itself. So let’s start with creating the circle first. The content itself is non existent, it is just a stroke with a certain width and with rounded corners to create a circle. Checkmark’s color is set by the border color (in this case, red). The thickness of the border (the .5em after the ‘solid’ attribute) defines the size of the circle. Border-radius that has the same value as the border thickness creates the actual circle instead of a square. In order not to have the circle aligned to the top left corner of the container holding the text, we need to adjust those values accordingly. Those paddings are set in the ‘top’ and ‘left’ properties.

.bullet-list-checkmark li:before{
   content: " ";
   display: block;
   border: solid .5em red;
   border-radius: .5em;
   position: absolute;
   left: 0px;
   top: 20%;
 }

Creating the checkmark

Now let’s proceed to create the checkmark. This particular shape is created by defining a border on two sides of an empty content box and rotating the content by 45 degrees. We start with empty content like in previous case and assign the width and height to the content box, depending on the proportions of the checkmark. In this case, I made one side twice as long as the other. I applied the white border to this box along two sides only by setting the border-width values for each side. Afterwards, I just centered the checkmark in the circle by applying left and top padding. That moved it away from the top left corner of the list item text box and I then rotated the shape by 45 degrees.

.bullet-list-checkmark li:after{
   content: " ";
   display: block;
   width: .3em;
   height: .6em;
   border: solid white;
   border-width: 0 .145em .145em 0;
   position: absolute;
   left: .35em;
   top: 30%;
   -webkit-transform: rotate(45deg); 
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
 }

Now you can create your own custom bullets in CSS and you don’t have to rely on the default styling. Remember to use the ’em’ values so you don’t have to resize the elements manually when changing the font size.

Close Menu
×

Cart

Get a FREEBIE!

Download these free trifold brochure PSD mockups.