Stylization of numerical lists ol through ::before. HTML + CSS Example

Create a basic numbered list on HTML:

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

Аdd styles:

ol {
  counter-reset: ol-numbers;
}

ol li {
  position: relative;
  padding: 0px 0px 0px 50px;
}

ol li::before {
  counter-increment: ol-numbers;
  content: counter(ol-numbers) ")";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  text-align: right; 
  color: red;
}