<LI> com emojis

by hbulhoes

HTML

<h3>Lista emoji-zada</h3>
<ul class="emoji-list">
  <li>Note that not all emojis may be supported in all browsers or devices, so it's essential to test and ensure that the emojis render correctly across different platforms.</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<h3>Lista "vanilla"</h3>
<ul>
  <li>Note that not all emojis may be supported in all browsers or devices, so it's essential to test and ensure that the emojis render correctly across different platforms.</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

.emoji-list {
  list-style-type: none;
}

.emoji-list li::before {
  content: ""; /* Required for the ::before pseudo-element */
  display: inline-block;
  margin-right: 0.5em; /* Adjust spacing as needed */
  margin-left: -2em; /* Alinhado perfeitamente com o LI "vanilla" */
}

.emoji-list li:nth-child(1)::before {
  content: "🌟";
}

.emoji-list li:nth-child(2)::before {
  content: "🌼";
}

.emoji-list li:nth-child(3)::before {
  content: "🔥";
}