list with costum icons and line between the icons

by Osama Qassar

HTML

<style>
body{
  background: #ccc
}
.custom-list {
  list-style: none; /* Remove default bullets */
  padding-left: 0; /* Remove default padding */
  position: relative;
}

.custom-list li {
  position: relative;
  padding-left: 40px; 
  margin: 20px 0;
}

.custom-list li::before {
  content: '';  
  position: absolute;
  left: 0;
  top: 0px;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-position: center;
}

.custom-list li::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 30px;
  width: 2px;
  height: calc(100% - 17px);
  background-color: #000;
  z-index: -1;
}

/* Remove the line after the last item */
.custom-list li:last-child::after {
  display: none;
}

/* Custom bullet images for each item */
.custom-list li:nth-child(1)::before {
  background-image: url('https://cdn-icons-png.flaticon.com/512/535/535239.png'); /* Replace with your image */
}

.custom-list li:nth-child(2)::before {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/2214px-How_to_use_icon.svg.png'); /* Replace with your image */
}

.custom-list li:nth-child(3)::before {
  background-image: url('https://cdn-icons-png.flaticon.com/512/535/535239.png'); /* Replace with your image */
}

.custom-list li:nth-child(4)::before {
  background-image: url('https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/256x256/plain/check.png'); /* Replace with your image */
}
</style>



<ul class="custom-list">
  <li>
    <b>Item 1</b>
    <p>
  Identify top-performing areas and property types that align with your financial goals.
    </p>
    </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>