css - ::marker

by prince bazawule

HTML

<ol>
  <li>Roy Ayers</li>
  <li>Herbie Hancock</li>
  <li>Al Jarreau</li>
</ol>

SCSS

// variables

// colors
$lightgrey: rgba(238, 241, 243, 1);
$darkgrey: rgba(192, 200, 208, 1);
$blue: rgba(34, 190, 198, 1);
$black: rgba(48, 69, 92, 0.8);

// fonts
$sans: 'Ubuntu', sans-serif;

// document styles
body {
	position: relative;
	width: 90%;
	height: 100%;
	background: $lightgrey;
	font-family: $sans;
	font-weight: 300;
	color: $black;
	margin: 5% auto;
	
	p {
		margin-bottom: 1em;
	}
	
	ol {
	counter-reset: my-counter;
	li { // list items with marker
		counter-increment: my-counter;
		&::marker {
			content: "› " counter(my-counter) "  ";
			color: $blue;
			font-size: 1.5rem;
			margin-right: 2rem;
		}
	}
}
}