Popular Tags

CSS List Style: 20+ examples

This guide contains simple and practical CSS list styles you can copy and paste, including 20+ CSS list styles templates and examples.

CSS List Style: 20+ examples

Contents

  1. Unordered List
  2. Ordered List
  3. Changing Punctuation in List Items
  4. Position the List Item Markers
  5. Colored Markers
  6. Colored Markers with Background
  7. Examples of More Advanced Use

Web browsers dictate how bulleted and numbered lists should look. Fortunately, you can style your lists by combining various CSS properties so that your lists look just the way you want them to. And this guide will help you achieve the maximum effect.

Unordered List

To create a list marked with bullets (an unordered list, UL), use the <ul> tag:

    
        
<ul class="list">
    <li class="list-item one">Enclosed above, beneath, before, behind</li>
    <li class="list-item two">In green uncertainty, from which a shark</li>
    <li class="list-item three">At any time may dash</li>
    <li class="list-item four">And doom you like some huge demonic fate...</li>
</ul>
    
CSS unordered list example

Set List Item Markers

By default, your list marker will look like a small disc. You can change the way it looks and set different list item markers by applying the list-style-type property to the list (<ul>). By way of illustration, we’ll apply this rule to the each individual <li> element inside their parent <ul>:

    
        
.one { list-style-type: disc; }
.two { list-style-type: circle; }
.three { list-style-type: square; }
.four { list-style-type: none; }
    
CSS unordered list item markers examples

Custom Bullets

You can also specify your own markers, such as “—”, “+”, “*”, “→”, “🌈”, “😎”, etc.:

    
        
ul {
  list-style-type: "*";
}
    

Here’s another solution if you want to use more options like positioning of the marker:

    
        
ul li {
  list-style: none;
  position: relative;
  padding: 3px 0 2px 25px;
}

ul li::before {
  content: '*';
  position: absolute;
  top: 6px;
  left: 0;
}
    
CSS list custom markers

You can remove default settings by applying these rules:

    
        
ul {
  list-style-type: none;
  margin-left: 0;
  padding-right: 0;
}
    

Here are more examples of custom bullets in square, triangular, arrow, heart, diamond and other shapes:

CSS custom bullets
    
        
ul {
  line-height: 1.5em;
  margin: 5px 0 15px;
  padding: 0;
}

li {
  list-style: none;
  position: relative;
  padding: 0 0 0 20px;
}
    
    
        
li.square::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  background-color: #f9dd94;
}
    
    
        
li.triangle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #f9dd94;
}
    
    
        
li.arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  height: 5px;
  width: 5px;
  border: 1px solid #f9dd94;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
    
    
        
li.line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  display: block;
  border-top: 2px solid #f9dd94;
}
    
    
        
li.plus::before  {
  content: "";
  position: absolute;
  background: #f9dd94;
  left: 0;
  top: 9px;
  height: 2px; 
  width: 8px;
}

li.plus::after { 
  content: ""; 
  position: absolute; 
  background: #f9dd94;
  left: 3px; 
  top: 5px; 
  height: 10px; 
  width: 2px;
}
    
    
        
li.diamond::before {
  content: "";
  position: absolute; 
  left: 0px; 
  top: 0px; 
  width: 0; 
  height: 0; 
  border: 5px solid transparent; 
  border-bottom-color: #f9dd94;
}

li.diamond::after { 
  content: ""; 
  position: absolute; 
  left: 0px; 
  top: 10px; 
  width: 0; 
  height: 0; 
  border: 5px solid transparent; 
  border-top-color: #f9dd94;
}
    
    
        
li.checkmark::before {
  content: ""; 
  position: absolute; 
  left: 2px; 
  top: 5px; 
  width: 3px;
  height: 6px;
  border: solid #f9dd94;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
    
    
        
li.circle-checkmark::before {
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 2px; 
  border: solid 8px #f9dd94;
  border-radius: 8px;
}

li.circle-checkmark::after {
  content: ""; 
  position: absolute; 
  left: 5px;
  top: 5px;
  width: 3px;
  height: 6px;
  border: solid #7eb4e2;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
    
    
        
li.star::before {
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 5px;
  background: #f9dd94;
  width: 10px; 
  height: 10px;
  text-align: center; 
  transform: rotate(0deg);
}

li.star::after {
  content: ""; 
  position: absolute; 
  top: 5px; 
  left: 0; 
  height: 10px; 
  width: 10px; 
  background: #f9dd94;
  transform: rotate(45deg);
}
    
    
        
li.heart::before, li.heart::after {
  content: ""; 
  position: absolute; 
  left: 7px; 
  top: 5px; 
  width: 7px; 
  height: 12px; 
  background: #f9dd94;
  border-radius: 50px 50px 0 0; 
  transform: rotate(-45deg); 
  transform-origin: 0 100%;
}

li.heart::after {
  content: ""; 
  position: absolute; 
  top: 5px; 
  left: 0; 
  transform: rotate(45deg); 
  transform-origin: 100% 100%;
}
    
    
        
li.cross::before {
  content: "";
  position: absolute;
  height: 15px;
  border-left: 2px solid #f9dd94;
  transform: rotate(45deg);
  top: 2px;
  left: 5px;
}

li.cross::after {
  content: "";
  position: absolute;
  height: 15px;
  border-left: 2px solid #f9dd94;
  transform: rotate(-45deg);
  top: 2px;
  left: 5px;
}
    
    
        
li.curved-arrow::before {
  content: "";
  position: absolute;
  width: 0; 
  height: 0;
  left: 4px;
  top: 3px;
  border-top: 9px solid transparent; 
  border-right: 9px solid #f9dd94;
  transform: rotate(10deg);
}

li.curved-arrow::after {
  content: "";
  position: absolute;
  border: 0 solid transparent; 
  border-top: 3px solid #f9dd94;
  border-radius: 20px 0 0 0; 
  top: 0; 
  left: -5px; 
  width: 12px; 
  height: 12px; 
  transform: rotate(45deg);
}
    

Find more examples of creating different shapes with CSS:

→ CSS Shapes

Set an Image as List Item Marker

You can also set an image as the list item marker using one of two ways.

Solution #1. You can apply the CSS list-style-image property to your <ul> element and indicate a path to your image. In this case, you need to resize your image manually in advance so it would fit in the list (e. g. 30 px × 30 px).

    
        
ul {
  list-style-image: url("images/shark-small.png");
}
    

Solution #2. You can apply background-image to li::before as a more flexible solution. You don’t need to resize your image manually and you can use different icons for each <li> element if you need.

    
        
ul li {
  list-style: none;
}

ul li:before {
  content: "";
  display: inline-block;
  height: 30px;
  width: 30px;
  background-size: contain;
  background-image: url("images/shark.png");
}
    
Set image as a CSS list marker

Learn more about CSS backgrounds:

→ CSS Background

Ordered List

To create a list marked with numbers or letters (an ordered list, OL), use <ol>:

    
        
<ol class="list">
    <li class="list-item one">Enclosed above, beneath, before, behind</li>
    <li class="list-item two">In green uncertainty, from which a shark</li>
    <li class="list-item three">At any time may dash</li>
    <li class="list-item four">And doom you like some huge demonic fate...</li>
</ol>
    
CSS ordered list example

By default, your list will be marked by Arabic numerals. You can change this behavior by applying the list-style-type property to the list (<ol>). By way of illustration, we’ll apply this rule to the each individual <li> element inside their parent <ol>:

    
        
.one { list-style-type: decimal; }
.two { list-style-type: decimal-leading-zero; }
.three { list-style-type: lower-roman; }
.four { list-style-type: upper-roman; }
.five { list-style-type: lower-greek; }
.six { list-style-type: lower-latin; }
.seven { list-style-type: upper-latin; }
.eight { list-style-type: armenian; }
.nine { list-style-type: georgian; }
.ten { list-style-type: lower-alpha; }
.eleven { list-style-type: upper-alpha; }
    
CSS ordered list markers

Changing Punctuation in List Items

You can add a semicolon at the end of each list item or any other punctuation mark:

    
        
li:not(:last-child)::after {
  content: ";";
}
    
CSS list with semicolon

You can also remove a comma in an ordered list marker:

    
        
ol {
  counter-reset: item;
  list-style-type: none;
}

ol li {
  display: block;
}

ol li:before {
  content: counter(item) "  ";
  counter-increment: item;
}
    
CSS ordered list marker without a comma

Position the List Item Markers

Web browsers also dictate how CSS list items are positioned. You might want to change the default look.

First, you might want to remove the margin to the left of your list (apply margin-left with any value that suits you). 

Second, you can add the list-style-position: inside; so that the bullet points would be inside the list item and part of the text. The result will be a CSS list indent.

Third, you can add margin-bottom to all <li> elements except for the last one so that your list would be more readable.

    
        
ul {
  line-height: 1.8;
  margin-left: -40px;
  list-style-position: inside;
}

ul li:not(:last-child) {
  margin-bottom: 20px;
}
    
CSS list indent

If you want the text to be aligned along one line vertically, simply remove list-style-position: inside;:

    
        
ul {
  line-height: 1.8;
  margin-left: -20px;
  /* list-style-position: inside; */
}

ul li:not(:last-child) {
  margin-bottom: 20px;
}
    
CSS list vertical alignment

You can use a shorthand property to set all the list properties in one declaration: ul {list-style: none inside url("images/shark-small.png");}

Colored Markers

By default, markers of unordered lists are round, small and have the same color as the text. You can set the color and size of markers the way you like. For example, let’s make them bigger and pink-colored:

    
        
ul {
  display: block;
  margin-left: -10px;
}

ul li {
  display: block;
  position: relative;
}

ul li:not(:last-child) {
  margin-bottom: 16px;
}

ul li:before {
  content: "";
  position: absolute;
  top: 1.2em;
  left: -30px;
  margin-top: -.9em;
  background: #f69ec4;
  height: 12px;
  width: 12px;
  border-radius: 50%;
}
    
CSS list colored markers

Apply linear-gradient() instead of simple color, and you will get gradient markers:

    
        
ul li:before {
  …
  background: linear-gradient(45deg, #f69ec4, #f9dd94);
}
    
CSS list gradient marker

Find more examples of creating CSS gradients:

→ CSS Gradients: 7 Examples of Usage

If you only want to change the color, apply these rules:

    
        
ul li {
  list-style-type: none;
}

ul li:before {
  content: counter(item, disc) " ";
  color: pink;
}
    

Likewise, you can change the color of markers in an ordered list:

    
        
ol li {
  list-style-type: none;
  counter-increment: item;
}

ol li:before {
  content: counter(item) ". ";
  color: #f9dd94;
}
    
CSS ordered list color

The counter-increment property allows you to assign a name to your counter. This provides a way to identify the counter when using the ::before pseudo-element. When you name the counter-increment “item” (or whatever you like), you’re telling the browser to use a counter for each list item.

Colored Markers with Background

You can go further and add even more visual effects. For example, you can create markers with numbers in colored squares:

    
        
ol li {
  list-style-type: none;
  counter-increment: item;
}

ol li:before {
  content: counter(item);
  margin-right: 5px;
  font-size: 80%;
  background-color: #f9dd94;
  color: #7eb4e2;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}
    
CSS ordered list background

You can also use a different font family for numbers in list item markers:

    
        
ol {
  line-height: 2;
}

ol li {
  list-style-type: none;
  counter-increment: item;
}

ol li:before {
  content: counter(item);
  display: inline-block;
  width: 12px;
  height: 20px;
  font-family: "Indie Flower", cursive;
  margin-right: 5px;
  background-color: #f9dd94;
  color: #7eb4e2;
  font-weight: bold;
  font-size: 140%;
  padding: 0 8px 8px;
  border-radius: 3px;
  line-height: 1.3;
}
    
CSS ordered list font&nbsp;

It is also possible to make round colored markers with numbers.

You need to nest <span> elements inside each <li> element:

    
        
<ol class="list">
    <li class="list-item one"><span>Enclosed above, beneath, before, behind</span></li>
    <li class="list-item two"><span>In green uncertainty, from which a shark</span></li>
    <li class="list-item three"><span>At any time may dash</span></li>
    <li class="list-item four"><span>And doom you like some huge demonic fate...</span></li>
</ol>
    

Here are CSS rules:

    
        
ol {
  counter-reset: item;
  list-style-type: none;
  line-height: 2.2;
  margin-left: -40px;
}

ol li {
  display: block;
  position: relative;
}

ol li span {
  margin-left: 40px;
}

ol li:before {
  content: counter(item) " ";
  counter-increment: item;
  color: #7eb4e2;
  position: absolute;
  top: 50%;
  margin-top: -1em;
  background: #f9dd94;
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  border-radius: 2em;
  font-weight: 700;
}
    

The result will look like this:

CSS unordered list background

Apply linear-gradient() instead of simple color, and you will get gradient markers:

    
        
ol li:before {
  ...
  background: linear-gradient(45deg, #f69ec4, #f9dd94);
}
    
CSS list gradient background

Find more examples of creating CSS gradients:

→ CSS Gradients: 7 Examples of Usage

Examples of More Advanced Use

Below are three examples of more complicated CSS lists with fancy design and animation.

Example #1

CSS list animation
    
        
<ol>
    <li class=""><a href="#">Grilled Flatfish With Pistachio-Herb Sauce</a></li>
    <li class=""><a href="#">Coconut Cod Chowder With Seasoned Oyster Crackers</a></li>
    <li class=""><a href="#">Tamarind-Glazed Black Bass With Coconut-Herb Salad</a></li>
    <li class=""><a href="#">Spicy Sweet-and-Sour Salmon With Dates</a></li>
</ol>
    
    
        
ol {
  counter-reset: li; 
  list-style: none; 
  padding: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol a {
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  margin: .5em 0;
  background: #DAD2CA;
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: .3s ease-out;
}

ol a:hover { background: #E9E4E0; }
ol a:hover:before { transform: rotate(360deg); }
ol a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #f9dd94;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}
    

Example #2

CSS list animation
    
        
<ol>
    <li class=""><a href="#">Grilled Flatfish With Pistachio-Herb Sauce</a></li>
    <li class=""><a href="#">Coconut Cod Chowder With Seasoned Oyster Crackers</a></li>
    <li class=""><a href="#">Tamarind-Glazed Black Bass With Coconut-Herb Salad</a></li>
    <li class=""><a href="#">Spicy Sweet-and-Sour Salmon With Dates</a></li>
</ol>
    
    
        
ol {
  counter-reset: li; 
  list-style: none; 
  padding: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol a {
  position: relative;
  display: block;
  padding: .4em .4em .4em .8em;
  margin: .5em 0 .5em 2.5em;
  background: #D3D4DA;
  color: #444;
  text-decoration: none;
  transition: all .3s ease-out;
}

ol a:hover {background: #DCDDE1;}       
ol a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -2.5em;
  top: 50%;
  margin-top: -1em;
  background: #f9dd94;
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  font-weight: bold;
}

ol a:after {
  position: absolute;
  content: "";
  border: .5em solid transparent;
  left: -1em;
  top: 50%;
  margin-top: -.5em;
  transition: all .3s ease-out;
}

ol a:hover:after {
  left: -.5em;
  border-left-color: #f9dd94;
}
    

Example #3

CSS list restaurant menu
    
        
<ul>
    <li><span>Grilled Flatfish</span><span>$20</span></li>
    <li><span>Coconut Cod Chowder</span><span>$25</span></li>
    <li><span>Tamarind-Glazed Black Bass</span><span>$30</span></li>
    <li><span>Spicy Salmon</span><span>$35</span></li>
</ul>
    
    
        
ul {
  list-style: none;
  font-family: 'Marck Script', cursive;
}

ul li {
  margin-bottom: 5px;
  border-bottom: 2px #404B51 dotted;
  font-size: 26px;
  line-height: 1;
}

ul li span:nth-child(odd) {
  padding-right: 6px; 
  color: #404B51;
}

ul li span:nth-child(even) {
  float: right; 
  padding-left: 6px;
  color: #fff;
}

ul span {
  position: relative;
  bottom: -7px;
}
    

These three examples above are inspired by html5book.ru.


Read next:

→ How To Create a Navigation Bar: 6 Useful Tricks

→ CSS Borders: 7 Examples