<body>
  <ol>
    <li> In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.</li>
        <li> In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.</li>
        <li> In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.</li>
        <li> In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.</li>
  </ol>
</body>
* {
  margin:0;
  padding:0;
}
body {
background:#222;
  color:#f4f4f4;
}
ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
  margin-top:0.5em;
}
ol li::before {
  content: counter(my-awesome-counter);
  padding:0.2em;
  color: red;
  font-weight: bold;
  background:yellow;
  border-radius:50%;
  text-align:center;
  transform:rotate(-10deg);
  border-right:2px solid white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.