List Customisation

ListCustomisation.html

<ul class="list">
	<li data-bullet="-">Lorem ipsum dolor sit amet, consectetur adipisicing</li>
	<li>tempor incididunt ut labore et dolore magna aliqua</li>
	<li data-bullet="#">quis nostrud exercitation ullamco laboris nisi ut</li>
	<li>consequat. Duis aute irure dolor in reprehenderit</li>
	<li data-bullet="-">cillum dolore eu fugiat nulla pariatur. Excepteur</li>
	<li>proident, sunt in culpa qui officia deserunt mollit</li>
	<li data-bullet="#">quis nostrud exercitation ullamco laboris nisi ut</li>
	<li>consequat. Duis aute irure dolor in reprehenderit</li>
	<li data-bullet="-">cillum dolore eu fugiat nulla pariatur. Excepteur</li>
	<li>proident, sunt in culpa qui officia deserunt mollit</li>
</ul>
<style>
	.list{
		list-style: none;
		padding: 0;
	}
	.list > li{
		margin: 4px 0;
	}
	.list > li:before{
		display: inline-block;
		font-weight: bold;
		margin-right: 4px;
		content: '+';
		width: 16px;
		height: 16px;
		font-size: 16px;
		text-align: center;
		line-height: 16px;
	}
	.list > li[data-bullet]:before{
		content: attr(data-bullet);
	}
</style>