← #85 Number headings and subheadings automatically
#86

Style list items with special characters

Topics: CSS

We often use circles or squares to style list items as following:

li {
list-style-type: circle;
}

Do you know that the list-style-type property also accepts a character. It means that we can use an emoji or Unicode character:

li {
list-style-type: "☀️";
}

/* Or */
li {
list-style-type: "\2600";
}

Demo

  • Sun: 23° - 35°
  • Mon: 24° - 32°
  • Tue: 24° - 35°
  • Wed: 24° - 32°
  • Thu: 25° - 33°
  • Fri: 25° - 34°
  • Sat: 26° - 35°

More

Fix a typo or suggest an improvement
#87 Create a function that accepts a single parameter