connoro7/custom-bullet-points.html

## custom-bullet-points.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <ol class="change-li-font">
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores recusandae nihil.</li>
      <li>Hic quod culpa fuga esse tempore deleniti necessitatibus architecto officia id? Eos.</li>
      <li>Quos atque adipisci nisi accusantium sunt molestias voluptatibus distinctio aut quia fugit.</li>
      <li>Tenetur, sunt non magni voluptas nemo asperiores fuga blanditiis optio molestias unde.</li>
      <li>Asperiores similique consequatur vel alias eum aperiam distinctio tempora doloremque excepturi vitae!</li>
    </ol>

    <ol class="custom-bullets">
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores recusandae nihil.</li>
      <li>Hic quod culpa fuga esse tempore deleniti necessitatibus architecto officia id? Eos.</li>
      <li>Quos atque adipisci nisi accusantium sunt molestias voluptatibus distinctio aut quia fugit.</li>
      <li>Tenetur, sunt non magni voluptas nemo asperiores fuga blanditiis optio molestias unde.</li>
      <li>Asperiores similique consequatur vel alias eum aperiam distinctio tempora doloremque excepturi vitae!</li>
    </ol>

    <ol class="super-custom-bullets">
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores recusandae nihil.</li>
      <li>Hic quod culpa fuga esse tempore deleniti necessitatibus architecto officia id? Eos.</li>
      <li>Quos atque adipisci nisi accusantium sunt molestias voluptatibus distinctio aut quia fugit.</li>
      <li>Tenetur, sunt non magni voluptas nemo asperiores fuga blanditiis optio molestias unde.</li>
      <li>Asperiores similique consequatur vel alias eum aperiam distinctio tempora doloremque excepturi vitae!</li>
    </ol>

    <div class="section-container">
      <h1>Lorem ipsum dolor sit.</h1>
      <section>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint delectus atque eligendi placeat error, aperiam quia? Nisi architecto iusto illo hic id placeat, consequatur, alias sapiente,
        tempora praesentium corrupti adipisci.
      </section>
      <section>
        Voluptates explicabo expedita culpa voluptatem commodi assumenda corporis nulla eaque fugit praesentium dolores officiis distinctio nihil odit est repellat, mollitia aspernatur aut earum
        necessitatibus. Iusto, aspernatur. Expedita architecto illum nisi!
      </section>
      <section>
        Facere officia dolorum adipisci expedita eaque nobis, ipsa pariatur? Natus repellendus voluptates quisquam repellat praesentium sapiente, neque optio architecto amet atque minus esse placeat
        rem cum pariatur ipsam et quo.
      </section>
    </div>
  </body>
</html>

## style.css
body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
  margin: 0;
}

.change-li-font > li::marker {
  color: hsl(340 50% 50%);
  font-weight: 900;
}

.custom-bullets > li::marker {
  content: '🔥';
}

.super-custom-bullets {
  list-style: none; /* Removes default ordered list numbering */
  padding: 0;
  margin: 0;
  counter-reset: super-custom-bullet-counter;
}
.super-custom-bullets li {
  counter-increment: super-custom-bullet-counter;
  margin-block-end: 1rem;
}
.super-custom-bullets li::before {
  content: counter(super-custom-bullet-counter);
  background: #222;
  font-size: 0.8rem;
  color: #efefef;
  line-height: 1;
  font-weight: 900;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  aspect-ratio: 1;
  border: 3px solid hsl(340 50% 50%);
  border-radius: 50%;
  margin-right: 0.5rem;
}

.section-container {
  counter-reset: section-counter;
  max-width: 60%;
}

.section-container section {
  counter-increment: section-counter;
  margin-block-end: 1rem;
}
section::before {
  content: counter(section-counter);
  background: white;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid mediumpurple;
  box-sizing: border;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="style.css" />
	</head>

	<body>
	<ol class="change-li-font">
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores recusandae nihil.</li>
	<li>Hic quod culpa fuga esse tempore deleniti necessitatibus architecto officia id? Eos.</li>
	<li>Quos atque adipisci nisi accusantium sunt molestias voluptatibus distinctio aut quia fugit.</li>
	<li>Tenetur, sunt non magni voluptas nemo asperiores fuga blanditiis optio molestias unde.</li>
	<li>Asperiores similique consequatur vel alias eum aperiam distinctio tempora doloremque excepturi vitae!</li>
	</ol>

	<ol class="custom-bullets">
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores recusandae nihil.</li>
	<li>Hic quod culpa fuga esse tempore deleniti necessitatibus architecto officia id? Eos.</li>
	<li>Quos atque adipisci nisi accusantium sunt molestias voluptatibus distinctio aut quia fugit.</li>
	<li>Tenetur, sunt non magni voluptas nemo asperiores fuga blanditiis optio molestias unde.</li>
	<li>Asperiores similique consequatur vel alias eum aperiam distinctio tempora doloremque excepturi vitae!</li>
	</ol>

	<ol class="super-custom-bullets">
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores recusandae nihil.</li>
	<li>Hic quod culpa fuga esse tempore deleniti necessitatibus architecto officia id? Eos.</li>
	<li>Quos atque adipisci nisi accusantium sunt molestias voluptatibus distinctio aut quia fugit.</li>
	<li>Tenetur, sunt non magni voluptas nemo asperiores fuga blanditiis optio molestias unde.</li>
	<li>Asperiores similique consequatur vel alias eum aperiam distinctio tempora doloremque excepturi vitae!</li>
	</ol>

	<div class="section-container">
	<h1>Lorem ipsum dolor sit.</h1>
	<section>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint delectus atque eligendi placeat error, aperiam quia? Nisi architecto iusto illo hic id placeat, consequatur, alias sapiente,
	tempora praesentium corrupti adipisci.
	</section>
	<section>
	Voluptates explicabo expedita culpa voluptatem commodi assumenda corporis nulla eaque fugit praesentium dolores officiis distinctio nihil odit est repellat, mollitia aspernatur aut earum
	necessitatibus. Iusto, aspernatur. Expedita architecto illum nisi!
	</section>
	<section>
	Facere officia dolorum adipisci expedita eaque nobis, ipsa pariatur? Natus repellendus voluptates quisquam repellat praesentium sapiente, neque optio architecto amet atque minus esse placeat
	rem cum pariatur ipsam et quo.
	</section>
	</div>
	</body>
	</html>
	body {
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-height: 100vh;
	margin: 0;
	}

	.change-li-font > li::marker {
	color: hsl(340 50% 50%);
	font-weight: 900;
	}

	.custom-bullets > li::marker {
	content: '🔥';
	}

	.super-custom-bullets {
	list-style: none; /* Removes default ordered list numbering */
	padding: 0;
	margin: 0;
	counter-reset: super-custom-bullet-counter;
	}
	.super-custom-bullets li {
	counter-increment: super-custom-bullet-counter;
	margin-block-end: 1rem;
	}
	.super-custom-bullets li::before {
	content: counter(super-custom-bullet-counter);
	background: #222;
	font-size: 0.8rem;
	color: #efefef;
	line-height: 1;
	font-weight: 900;
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	aspect-ratio: 1;
	border: 3px solid hsl(340 50% 50%);
	border-radius: 50%;
	margin-right: 0.5rem;
	}

	.section-container {
	counter-reset: section-counter;
	max-width: 60%;
	}

	.section-container section {
	counter-increment: section-counter;
	margin-block-end: 1rem;
	}
	section::before {
	content: counter(section-counter);
	background: white;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 3px solid mediumpurple;
	box-sizing: border;
	}