CSS Custom Bullet Points [ Updated ]

HTML has two types of lists, (OL) order list and (UL) unordered list. By default, each list item is a circle placed to the left of the item. In this tutorial, we will add custom bullet points using CSS.

How do you make a bullet point in HTML?

<ul>
 <li style="list-style:upper-roman;">Upper roman</li>
 <li style="list-style:upper-roman inside;">roman inside</li>
 <li style="list-style:lower-alpha;">Lower alpha</li>
 <li style="list-style:lower-alpha inside;">Lower alpha inside</li>
 <li style="list-style:square;">Square Bullets</li>
 <li style="list-style:square inside;">Square inside</li>
 <li style="list-style:disc;">Disc Bullets</li>
 <li style="list-style: disc inside;">Disc inside</li>
 <li style="list-style:circle;">Circle Bullets</li>
 <li style="list-style:circle inside;">Circle inside</li>
</ul>
type-of-list-style

Examples of CSS list-style

We have listed examples of the different values of the list-style property.

list-style: disc inside;
list-style: disc outside;
list-style: circle inside;
list-style: circle outside;
list-style: square inside;
list-style: upper-roman inside;
list-style: lower-alpha inside;
list-style: disc inside url("image-path");

Examples of CSS list-style-type

We have listed examples of the different values of the list-style-type property.

list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-roman;
list-style-type: lower-greek;
list-style-type: lower-latin;
list-style-type: lower-alpha;
list-style-type: armenian;
list-style-type: upper-roman;
list-style-type: upper-latin;
list-style-type: upper-alpha;
list-style-type: upper-greek;
list-style-type: hiragana;
list-style-type: hiragana-iroha;
list-style-type: katakana;
list-style-type: katakana-iroha;
list-style-type: cjk-ideographic;
list-style-type: georgian;
list-style-type: hebrew;

How can you customize a bulleted list?

Step #1: Creating a New Project

The first thing we’ll do is create a folder that will contain all of the files that make up the project. Create an empty folder on your devices and name it “as you want”.

Open up Visual Studio Code or any Text editor which is you liked, and create files(index.html, style.css) inside the folder which you have created for customize a bullet points. In the next step, we will start creating the basic structure of the webpage.

Step #2: Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to add custom bullets in html</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta https-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    
  </body>
</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

<div class="wrapper">
  <ul class="listing">
    <li class="item">list style type</li>
    <li class="item">list style type</li>
    <li class="item">list style type</li>
    <li class="item">list style type</li>
    <li class="item">list style type</li>
  </ul>
</div>

Step #3: Adding Styles for the Classes

Then we need to add CSS code for style our html elements.

* {
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: #f2f4f6;
}
.listing {
  margin: 0;
  padding: 0;
  list-style: none;
}
.listing > li {
  position: relative;
  padding-left: 15px;
  color: #0400ff;
}
.listing > li:before {
  content: "";
  width: 10px;
  height: 10px;
  background: linear-gradient(to top left, #0400ff, #ff00d4);
  position: absolute;
  left: 0;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
CSS Text Shadow Effect examples

CSS Text Shadow Effects [ Top 20 Text Shadow Example]

Hello, guys in this tutorial we have best collection of hand-picked free HTML and CSS Text Shadow Effects example which are available on CodePen.

Best Collection of CSS Bullet Points Codepen

#1: List-style-type Strings

List-style-type Strings

List-style-type Strings, which was developed by SitePoint. Moreover, you can customize it according to your wish and need.

Author:SitePoint
Created on:JULY 14, 2015
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:List-style-type Strings

#2: Bullet Points with the ::before pseudo-element

Bullet Points with the before pseudo-element

Bullet Points with the ::before pseudo-element, which was developed by Clive Walker. Moreover, you can customize it according to your wish and need.

Author:Clive Walker
Created on:MARCH 24, 2016
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:pseudo-element bullet points

#3: Custom bullet points css

Custom bullet points css

Custom bullet points css, which was developed by Kieran Hunter. Moreover, you can customize it according to your wish and need.

Author:Kieran Hunter
Created on:OCTOBER 2, 2014
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:css bullet points

#4: Fancy CSS Checkmark Bullet Points

Fancy CSS Checkmark

Fancy CSS Checkmark, which was developed by Dave Odden. Moreover, you can customize it according to your wish and need.

Author:Dave Odden
Created on:OCTOBER 21, 2012
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:Fancy CSS Checkmark

#5: Animated Custom Bullet Points

Animated Custom Bullet Points

Animated Custom Bullet, which was developed by marcruecker. Moreover, you can customize it according to your wish and need.

Author:marcruecker
Created on:MAY 11, 2017
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:Animated Custom Bullet

#6: list items Icon Bullet Points

list items Icon Bullet Points

list items Icon Bullet, which was developed by WebDevStudios. Moreover, you can customize it according to your wish and need.

Author:WebDevStudios
Created on:JANUARY 29, 2016
Made with:HTML & CSS(SCSS)
Demo Link:Source Code / Demo
Tags:list items Icon Bullet

#7: Sans Images Bullet Points

Sans Images Bullet Points

Sans Images Bullet Points, which was developed by charlesim. Moreover, you can customize it according to your wish and need.

Author:charlesim
Created on:JANUARY 28, 2013
Made with:HTML & CSS(SCSS)
Demo Link:Source Code / Demo
Tags:Sans Images Bullet Points

#8: Emoji bullet points using @counter-style

Emoji bullet points using @counter-style

Emoji bullet points using @counter-style, which was developed by Claire. Moreover, you can customize it according to your wish and need.

Author:Claire
Created on:MARCH 29, 2019
Made with:HTML(Pug) & CSS(SCSS)
Demo Link:Source Code / Demo
Tags:Emoji bullet points

#9: Custom Lists with Font Awesome icon Bullet

Custom Lists with Font Awesome icon Bullet

Custom Lists with Font Awesome icon Bullet, which was developed by marcruecker. Moreover, you can customize it according to your wish and need.

Author:Claire
Created on:JANUARY 27, 2016
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:Font Awesome icon Bullet

#10: Ordered list circular bullet points

Ordered list circular bullet points

Ordered list circular bullet points, which was developed by eric. Moreover, you can customize it according to your wish and need.

Author:eric
Created on:AUGUST 27, 2014
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:Ordered list circular bullet points
If you liked this article best custom bullet points examples, you should check out this one 35+ HTML 404 Page Templates

Leave a Comment