Spruce Up Your List-Item Bullets with Emojis!
If you want to add some pizzazz (🎆) to your lists with flashier bullets, it's easy to do with emojis!
🤘🚀😎🍕🥓🍩🌭🏓🥇🔨🤷♂️🎅🐖🏍☢🎉🎈
The Basic Setup
To start, all we need to do is set the content of the list-item:
<style type="text/css">
ul.rocket li {
list-style-type: none;
}
ul.rocket li:before {
content: '🚀';
}
</style>
<ul class="rocket">
<li>ten</li>
<li>nine</li>
<li>eight</li>
<li>seven</li>
<li>six</li>
<li>five</li>
<li>four</li>
<li>three</li>
<li>two</li>
<li>one</li>
<li>blast off!</li>
</ul>
- ten
- nine
- eight
- seven
- six
- five
- four
- three
- two
- one
- blast off!
... and that's it! But let's see if we can take it a step further by rotating the 🚀.
Rotate!
We'll tap into the transform to rotate our little 🚀. Since this is an inline element, we also need to set the ::before to display: inline-block; (per the W3 specifications).
<style type="text/css">
ul.rocket li {
list-style-type: none;
}
ul.rocket li:before {
content: '🚀';
display: inline-block;
transform: rotate(45deg);
font-size: .85em; // I also made it a little smaller
}
</style>
- I am the rocket man.
- I am the rocket man. I am the rocket man. I am the rocket man. I am the rocket man. I am the rocket man. I am the rocket man. I am the rocket man. I am the rocket man. I am the rocket man. I am the rocket man.
That looks OK, but the 🚀 butts up pretty close to the text, and the text shouldn't wrap under the 🚀. But we can fix all that!
<style type="text/css">
ul.rocket {
margin-left: 2em; // you may have to fiddle with this
}
ul.rocket li {
list-style-type: none;
position: relative;
}
ul.rocket li:before {
content: '🚀';
display: inline-block;
transform: rotate(45deg);
font-size: .85em; // I also made it a little smaller
position: absolute;
top: -.01em; // you may have to fiddle with this
left: -2em; // you may have to fiddle with this
}
</style>
- T minus 10 minutes.
- T minus 10 minutes. T minus 10 minutes. T minus 10 minutes. T minus 10 minutes. T minus 10 minutes. T minus 10 minutes. T minus 10 minutes. T minus 10 minutes. T minus 10 minutes. T minus 10 minutes.
- T minus 10 minutes.
It's looking good! You may have to adjust some of the padding and position depending on which emoji you choose and your existing styles. But the bulk of the work is done. You can mix-and-match emojis if you want and even add some spinning!
<style type="text/css">
ul.emojis {
margin-left: 2em !important;
}
ul.emojis li {
list-style-type: none !important;
position: relative;
}
ul.emojis li:before {
display: inline-block;
font-size: .85em;
position: absolute;
left: -2em;
}
ul.emojis li.emoji-hot-dog:before {
content: '🌭';
top: 0;
}
ul.emojis li.emoji-cowboy:before {
content: '🤠';
top: .01em;
transform: rotate(180deg);
}
ul.emojis li.emoji-bacon:before {
content: '🥓';
top: .1em;
animation: spin 4s linear infinite;
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
- Hot diggity dog!
- Yeehaw!
- Sizzling!