Counted long lists

by Scott Kaye

HTML

<h3>
This list will display a total, since it has over 10 items:
</h3>
<ul class="small-list">
  <li>Long list item 1</li>
  <li>Long list item 2</li>
  <li>Long list item 3</li>
  <li>Long list item 4</li>
  <li>Long list item 5</li>
  <li>Long list item 6</li>
  <li>Long list item 7</li>
  <li>Long list item 8</li>
  <li>Long list item 9</li>
  <li>Long list item 10</li>
  <li>Long list item 11</li>
  <li>Long list item 12</li>
  <li>Long list item 13</li>
  <li>Long list item 14</li>
  <li>Long list item 15</li>
  <li>Long list item 16</li>
  <li>Long list item 17</li>
  <li>Long list item 18</li>
  <li>Long list item 19</li>
  <li>Long list item 20</li>
</ul>

<hr>

<h3>This list is short, and will not display a total:</h3>

<ul class="small-list">
  <li>Short list item 1</li>
  <li>Short list item 2</li>
  <li>Short list item 3</li>
  <li>Short list item 4</li>
  <li>Short list item 5</li>
</ul>

SCSS

.small-list {
	margin: 0;
	counter-reset: list-counter;
	position: relative;

	$minimum-counter: 10;

	li {
		counter-increment: list-counter;

		&:first-child {
			padding-top: 1em;
		}

		&:nth-last-child(#{$minimum-counter - 1}):not(:nth-child(n+#{$minimum-counter - 1})):first-child {
			padding-top: 0;
		}

		// Show a "X TOTAL" label if the list has over $minimum-counter items
		&:nth-child(n+#{$minimum-counter}):last-child::after {
			position: absolute;
			top: 0;
			left: 0;
			content: counter(list-counter) " total";
		}
	}
}