How to Build list-style-image and Ordered List using CSS

In this tutorial, we will be discussing how to create two types of lists using CSS: list-style-image and Ordered List. These lists are commonly used in web design to organize content in a structured and visually appealing way. With our step-by-step instructions, you'll learn how to create both types of lists and customize them to fit your website's design. This tutorial will provide you with the knowledge and skills you need to create professional-looking lists using CSS. So let's get started!

1. list-style-image

Here is your HTML for list-style-image:

<ul class="list">
  <li>Japan</li>
  <li>Italy</li>
  <li>Ireland</li>
  <li>Britain</li>
  <li>Norway</li>
</ul>

Here is your CSS for list-style-image:

ul {
  padding-left: 0px;
  list-style-type: none;
  color: black;
  text-align: left;
  padding-right: 10px;
}

ul li {
  padding: 5px;
  vertical-align: middle;
}

ul li:before {
  content: "";
  position: inline-block;
  top: 12px;
  left: 5px;
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-right: 5px;
  background-size: contain;
  background-image: url("flag.png");
  vertical-align: middle;
}

2. Ordered List

Here is your HTML for Ordered List:

<ol class="list">
  <li>Japan</li>
  <li>Italy</li>
  <li>Ireland</li>
  <li>Britain</li>
  <li>Norway</li>
</ol>

Here is your CSS for Ordered List:

ol {
  padding: 0;
}

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

ol li:before {
  content: counter(item);
  margin-right: 5px;
  background-color: #f9dd94;
  color: #000000;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

You have successfully learned creating Ordered List and list-image-style and designing it using CSS. If you have any doubt. Leave the comments below. Thank you!