How to use Unicode characters as bullet for list-item in CSS?

Spread the love

Sometimes, we want to use Unicode characters as bullet for list-item in CSS.

In this article, we’ll look at how to use Unicode characters as bullet for list-item in CSS.

How to use Unicode characters as bullet for list-item in CSS?

To use Unicode characters as bullet for list-item in CSS, we set the content property.

For instance, we write

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

to add a ul element.

Then we write

ul {
  list-style: none;
  padding: 0px;
}

ul li:before {
  content: "\2713";
  margin: 0 1em;
}

to disable the default bullet with list-style: none;.

And then we select the space before each li with :before and set its content property to the Unicode bullet value.

Conclusion

To use Unicode characters as bullet for list-item in CSS, we set the content property.

Leave a Reply

Your email address will not be published. Required fields are marked *