learn to code - lupe zambrano

tool box

bulleted lists dont have to be boring

emojipedia is a really useful tool for web developers, especially when you're making lists. it can even double as your bullet point source.

a refresher on the html for a list

<ul>
  <li>first item</li>
  <li>second item</li>
</ul>

how to change the bullets in a list:

by default, browsers will put a solid round dot in front of each list item.

example here with default dot!
not very aesthetic

but you can change them! here's the same list, but with an emoji from emojipedia:

example with a custom bullet
so much cuter

the css that makes it happen:

.fancy-list {
    list-style-type: none; 
    padding-left: -; 
}

.fancy-list li::before {
    content: "🍄"; 
    color: var(--coral);     
}

put the fancy-list tag inside your opening ul tag

here's what's happening:

list-style-type: none; kills the default dots.
padding-left: 0; realigns the text.
li::before lets you place something before each item.
content: "🍄"; that “something” is your emoji.
color: var(--coral); uses your brand color.