HTML li Elemente selbst erstellen

Question

Kann man das Design von li Elementen selbst designen? Also z.B Dreiecke, Haken oder eigene Bilder?

<style>
.custom-list {
  list-style-type: none;
}

.custom-list li {
 
}
</style>

<ul class="custom-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Answer 1

Hier ist ein Beispiel wie du Dreiecke mit CSS erstellen kannst.

.custom-list li:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid #0000ff; 
    margin-right: 0.5em;
    display: inline-block;
    vertical-align: middle;
}

Demo

Answer 2

Um Bilder als Bullets zu verwenden kannst du Pseudo-Elemente nutzen.

<style>
.custom-list {
  list-style-type: none;
}

.custom-list li:before {
  content: "";
  width: 20px; /* Durchmesser des Kreises */
  height: 20px; /* Durchmesser des Kreises */
  background-image: url('https://www.w3schools.com/w3images/mountains.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%; /* Macht das Bild zu einem Kreis */
  display: inline-block;
  margin-right: 0.5em;
  margin-top: 0.75em;
  vertical-align: middle;
  transform: translateY(-50%);
}
</style>

JSFiddle Demo