CSS Lists Components

<div>

<ul class="
	padding-left:0
	[li:before]{content:^✅^;position:absolute;left:0}
	[li:last-of-type]{margin-bottom:0}
	[li]{padding-left:28px;margin-bottom:4px;position:relative;list-style:none}
">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>

<ul class="
	padding-left:0
	[li]{padding-left:28px;margin-bottom:4px;position:relative;list-style:none}
	[li:last-of-type]{margin-bottom:0}
	[li:before]{position:absolute;left:0}
	[li:nth-child(odd):before]{content:^🍎^}
	[li:nth-child(even):before]{content:^🥑^}
">
	<li>Odd item</li>
	<li>Even item</li>
	<li>Odd item</li>
	<li>Even item</li>
</ul>

<ul class="
	padding-left:0
	[li]{padding-left:28px;margin-bottom:4px;position:relative;list-style:none}
	[li:last-of-type]{margin-bottom:0}
	[li:before]{position:absolute;left:0}
	[li.pros:before]{content:^👍^}
	[li.cons:before]{content:^👎^}
">
	<li class="pros">Pros (.pros)</li>
	<li class="cons">Cons (.cons)</li>
</ul>

<!--
stylify-components
	list: `
		padding-left:0
		li {
			padding-left:28px margin-bottom:4px position:relative list-style:none
			&:before { position:absolute left:0 }
			&:last-of-type { margin-bottom:0 }
		}
		&--rating {
			li.pros:before { content:^👍^ }
			li.cons:before { content:^👎^ }
		}
		&--odd-even {
			li:nth-child(odd):before { content:^🍎^ }
			li:nth-child(even):before { content:^🥑^ }
		}
		&--checked li:before { content:^✅^ }
	`
/stylify-components
-->

<ul class="list list--checked">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>

<ul class="list list--odd-even">
	<li>Odd item</li>
	<li>Even item</li>
	<li>Odd item</li>
	<li>Even item</li>
</ul>

<ul class="list list--rating">
	<li class="pros">Pros (.pros)</li>
	<li class="cons">Cons (.cons)</li>
</ul>