Phong Duong

πŸ”ŽSearch

Custom list style with πŸ‘‰ emoji

17-12-2020 | #css

list-style-type property supports a variety of values. It allows you to set the style of the list item's marker in different languages. But you can make it look more colorful and beautiful with emoji. In this tutorial, I will show you how to use emoji for the list item's marker.

- const listItems = ['One', 'Two', 'Three', 'Four', 'Five'];

ul 
  each item in listItems
    li= item

You will have a list that includes 5 items.

ul {
  list-style-type: "πŸ‘‰";
}

You set the list-style-type property with the emoji πŸ‘‰. It will display the emoji as the marker.

You can also set the marker for an individual item with pseudo-class.

ul {
	list-style-type: none;

	li:first-child {
		list-style-type: "πŸ‘‰";
	}
}

I found another way that you can set the marker with ::before pseudo-element.

ul {
	list-style-type: none;

	li::before {
		content: "πŸ‘‰";
	}
}

Here is the full code of the example

Share: TwitterFacebookLinkedInHacker News