Nicer CSS Lists

Custom lists using CSS Counter and prevents text from wrapping under the list bullet.

by vandigroup

HTML

<div>
	<h3>Unordered List</h3>	
	<ul class="nice-ul">
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam arcu, mattis eu sollicitudin a, porta sit amet justo. Nullam diam ex, elementum eu ante sed, pellentesque rutrum quam. Quisque varius iaculis lorem sit amet sodales. Maecenas eu dui fermentum, egestas velit at, rutrum orci. Suspendisse potenti. Duis placerat accumsan facilisis. In feugiat risus at ultricies semper. In tempus in sem ut vulputate.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	</ul>
</div>

<div>
	<h3>Unordered List</h3>	
	<ol class="nice-ol">
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam arcu, mattis eu sollicitudin a, porta sit amet justo. Nullam diam ex, elementum eu ante sed, pellentesque rutrum quam. Quisque varius iaculis lorem sit amet sodales. Maecenas eu dui fermentum, egestas velit at, rutrum orci. Suspendisse potenti. Duis placerat accumsan facilisis. In feugiat risus at ultricies semper. In tempus in sem ut vulputate.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	</ol>
</div>

CSS

div {
	position: relative;
	padding: 20px;
	margin: 10px;
	font: normal normal 15px/1.52 Arial, Helvetica, sans-serif;
	background: #fff;
}
h3 {
	margin-top: 0;
}

.nice-ul {
	position: relative;
	padding-left: 32px;
	list-style-type: none;
}
.nice-ul li {
	margin-bottom: 8px;
}
.nice-ul li:last-child {
	margin-bottom: 0;
}
.nice-ul li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	padding: 2px 8px;
	font-size: 1em;
	color: #1C90F3;
}

.nice-ol {
	position: relative;
	padding-left: 32px;
	list-style-type: none;
}
.nice-ol li {
	counter-increment: step-counter;
	margin-bottom: 8px;
}
.nice-ol li:last-child {
	margin-bottom: 0;
}
.nice-ol li::before {
	content: counter(step-counter);
	position: absolute;
	left: 0;
	padding: 3px 8px;
	font-size: 0.8em;
	color: white;
	font-weight: bold;
	background-color: #1C90F3;
	border-radius: 3px;
}