شمارش با CSS را یاد بگیرید

دمو :

کد HTML

<section>
    <p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
    <p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
    <p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
    <p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
    <p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
</section>

کد CSS

body {
  counter-reset: steps;  
}

p:before {
  counter-increment: steps;
  content: "Step " counter(steps) ": ";
}

p {
 color: #242424;
 font-family: arial, sans-serif;
 font-size: 16px;
 line-height: 20px;
}

p:before {
  counter-increment: steps;
  content: "Step " counter(steps) ": ";
  font-weight: bold;
  font-size: 18px;
}

پشتیبانی مرورگرها

نتیجه گیری