JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<ol class="circled-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

CSS

.circled-list {
  list-style-type: none; /* Remove default list-style-type */
  counter-reset: my-counter; /* Reset the counter */
  padding-left: 20px; /* Add left padding for list items */
  margin-left: 20px;
}


.circled-list li {
  position: relative; /* Set position property to relative for proper alignment */
  counter-increment: my-counter; /* Increment the counter */
  margin-bottom: 10px; /* Add bottom margin between list items */
}

.circled-list li::before {
  content: counter(my-counter); /* Use the counter value as content */
  display: inline-block; /* Set display property to inline-block to properly align the circle */
  width: 25px; /* Set width and height to create a circle */
  height: 25px;
  border: 2px solid #000; /* Set border property to create a circular border */
  border-radius: 50%; /* Set border-radius property to 50% to create a circle */
  color: #000; /* Set text color for the number within the circle */
  text-align: center; /* Center the number within the circle */
  line-height: 25px; /* Set line-height property to center the number vertically within the circle */
  position: absolute; /* Set position property to absolute for proper alignment */
  top: -5px; /* Adjust top position to align the circle with the text */
  left: -35px; /* Adjust left position to create space for the circle */
}