<ol>
  <li>Item One - the marker stays in the marker box, and content stays in the principal box.</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ol>
::marker {
  content: "Step " counter(list-item) ": ";
  color: #00b7a8;
  font-weight: bold;
}

ol {
  border: 2px solid #00b7a8;
  padding: 1em 1em 1em 4em;
  width: 300px;
}

li {
  padding-left: .5em;
}

body {
  font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  margin: 2em 3em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.