<div class="card">
  <p class="title">Standard list</p>
  
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
  </ul>
</div>

<div class="card">
  <p class="title">List styled with <code>list-style-type</code></p>
  
  <ul class="custom-1">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
  </ul>
</div>

<div class="card">
  <p class="title custom-list-item">List styled with <code>::marker</code></p>
  
  <ul class="custom-2">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
  </ul>
</div>

<div class="card">
  <p class="title">Ordered list styled with <code>::marker</code></p>
  
  <ol class="custom-3">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
  </ol>
</div>

<div class="card">
  <p class="title">Custom list with SVG bullets</p>
  
  <ul class="custom-4">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
  </ul>
</div>

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Custom properties */
:root {
  --text: #1E1F26;
  --c1: #0074E0;
  --c2: #1DD760;
}

/* Presentation */
body {
  display: flex;
  flex-flow: row wrap;
  background: #DDDFE3;
  font-size: 18px;
  line-height: 1.5;
  font-family: 'Poppins', sans-serif;
  color: var(--text);
}

.card {
  flex-grow: 1;
  padding: 4rem;
  margin: 1rem;
  background: #fff;
  box-shadow:
      0 12.5px 10px rgba(0, 0, 0, 0.035),
      0 100px 80px rgba(0, 0, 0, 0.07)
  ;
  border-radius: 4px;
}

.title {
  font-weight: bold;
  margin-bottom: 2rem;
}

/* Custom list bullets */
.custom-1 li {
  list-style-type: '> 😊 ';
  font-size: 120%;
}

.custom-1 li:nth-child(3) {
  list-style-type: '- 💻 ';
  color: var(--c1);
}

.custom-2 li::marker {
  color: var(--c2);
}

.custom-2 li:nth-child(2)::marker {
  color: var(--c1);
  font-size: 150%;
}

.custom-2 li:nth-child(3)::marker {
  content: '🦄';
}

p.custom-list-item {
  display: list-item;
}

p.custom-list-item::marker {
  content: '➡️'
}

.custom-3 li::marker {
  content: 'Step ' counter(list-item) ': ';
  color: var(--c2);
  transition: color 5s;
}

.custom-3 li:hover::marker {
  color: var(--c1);
}

.custom-3 li {
  padding-left: 1rem;
}

.custom-4 li::marker {
  content: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.753 5.99999L10.273 8.29399C9.877 8.68399 9.877 9.31699 10.273 9.70799C10.668 10.098 11.31 10.098 11.705 9.70799L15.555 6.06099C15.843 5.77799 16 5.40299 16 4.99999C16 4.59999 15.842 4.22199 15.556 3.93999L11.706 0.292988C11.31 -0.0970117 10.668 -0.0970117 10.272 0.292988C9.877 0.682988 9.877 1.31599 10.272 1.70699L12.752 3.99999H1C0.447 3.99999 0 4.44599 0 4.99999C0 5.54999 0.448 5.99999 1 5.99999H12.753Z' fill='%237B61FF'/%3E%3C/svg%3E%0A");
}

.custom-4 li {
  padding-left: .5rem;
}

.custom-4 li:hover::marker {
  content: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.753 5.99999L10.273 8.29399C9.877 8.68399 9.877 9.31699 10.273 9.70799C10.668 10.098 11.31 10.098 11.705 9.70799L15.555 6.06099C15.843 5.77799 16 5.40299 16 4.99999C16 4.59999 15.842 4.22199 15.556 3.93999L11.706 0.292988C11.31 -0.0970117 10.668 -0.0970117 10.272 0.292988C9.877 0.682988 9.877 1.31599 10.272 1.70699L12.752 3.99999H1C0.447 3.99999 0 4.44599 0 4.99999C0 5.54999 0.448 5.99999 1 5.99999H12.753Z' fill='%230074E0'/%3E%3C/svg%3E%0A");
}