Ordered list multiline text indentation

by Simon Harte

HTML

<ol>
	<li>text 1</li>
	<li>text 2 with new line</li>
	<li>text 3</li>
	<li>text 4</li>
	<li>text 5 with really really long text for multiple lines</li>
</ol>

SCSS

ol {
	width: 100px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: list;
	// 1.5ch length because of number + dot
	padding-left: calc(1.5ch + 10px);
}

li {
	counter-increment: list;
	margin-bottom: 5px;
	// 1.5ch length because of number + dot
	text-indent: calc(-1.5ch - 10px);
	
	&::before {
		content: counter(list)".";
		margin-right: 10px;
	}
}