Ordered List

Working Example

Tea Making Instructions
  1. Fill the kettle with water and replace on the stand.
  2. Switch on the power button.
  3. Wait approx. 3 minutes. In the meantime, take a large mug and place the teabag in the cup.
  4. When the kettle has boiled, fill the mug with boiling water. Do not leave water to stand for more than one minute, or you must boil again.
  5. Leave for 3–4 minutes, stirring occasionally.
  6. Remove teabag.
  7. Add milk according to taste.
  8. Serve immediately.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea Making Instructions</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file -->
</head>
<body>

    <ol>
        <li>Fill the kettle with water and replace on the stand.</li>
        <li>Switch on the power button.</li>
        <li>Wait approx. 3 minutes. In the meantime, take a large mug and place the teabag in the cup.</li>
        <li>When the kettle has boiled, fill the mug with boiling water. <strong>Do not leave water to stand for more than one minute, or you must boil again.</strong></li>
        <li>Leave for 3–4 minutes, stirring occasionally.</li>
        <li>Remove teabag.</li>
        <li>Add milk according to taste.</li>
        <li>Serve immediately.</li>
    </ol>

</body>
</html>

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto Slab', serif;
    font-size: 1.2rem;
    margin: 0;
    padding: 1rem;
    display: grid;
    place-items: center;
    min-height: 100vh;
    background-color: #fdf6e3; /* Soft background */
}

ol {
    padding: 0;
    margin: 0;
    max-width: 700px;
    position: relative;
    counter-reset: list-counter;
}

ol::before {
    content: '';
    width: 0.5rem;
    height: calc(100% + 2rem); /* Extends full height */
    position: absolute;
    top: -1rem; /* Adjust for better coverage */
    left: 5%; /* Better alignment */
    background: peachpuff;
}

li {
    list-style-type: none; /* Remove default list styling */
    counter-increment: list-counter;
    position: relative;
    padding: 0.5rem 1.5rem 1rem 2.5rem;
    border-radius: 1.5rem;
    background: peachpuff;
}

li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0.5rem;
    font-weight: 600;
    color: tomato;
    font-size: 1.8rem;
}

li + li {
    margin-top: 1rem;
}

Nil