Untitled

#ul.legend {
  list-style-type: none; /* Remove default list styles */
  padding: 0; /* Remove default padding */
}

#ul.legend li {
  position: relative; /* Position relative for absolute positioning of :before */
  padding-left: 20px; /* Space for the circle */
}

#ul.legend li:before {
  content: ""; /* Empty content */
  display: inline-block;
  width: 10px; /* Diameter of the circle */
  height: 10px;
  border-radius: 50%; /* Circle shape */
  background-color: #yourcolor; /* Fill color of the circle */
  position: absolute;
  left: 0;
  top: 50%; /* Adjust position to center vertically */
  transform: translateY(-50%); /* Center vertically */
}