HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>CSS counter-set jump value</title>

  <style>

    body {

      font-family: sans-serif;

      padding: 1.5rem;

      line-height: 1.6;

    }



    .steps {

      list-style: none;

      counter-reset: step;

      padding-left: 0;

    }



    .steps li {

      counter-increment: step;

      margin-bottom: 0.5rem;

    }



    .steps li::before {

      content: "Step " counter(step) ": ";

      font-weight: bold;

      color: #2563eb;

    }



    .steps li.jump {

      counter-set: step 10;

      counter-increment: none;

      padding: 0.75rem 1rem;

      margin: 0.75rem 0;

      background: #f1f5f9;

      border-radius: 0.5rem;

      font-size: 0.9rem;

      color: #64748b;

    }



    .steps li.jump::before {

      content: none;

    }

  </style>

</head>

<body>

  <h1>Jump to step 11</h1>

  <ol class="steps">

    <li>First action</li>

    <li>Second action</li>

    <li class="jump">Optional steps skipped — counter set to 10 here.</li>

    <li>Continues numbering</li>

    <li>Final action</li>

  </ol>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS counter-set Property - Jump to a Specific Number