CODEWITHSUNDEEP
html
Sindhu
Sindhu

Reputation: 51

How to align order list text with number properly

I have designed order list paragraph and also i need paragraph middle side of placed order list number. First paragraph is working fine. second and third is single line so changed align could you please solve this issue.

<!DOCTYPE html>
<html>
<style>
ol{
        padding: 0 10%;
    font-size: 16px;
    margin: 0 25px;
}
li{
        padding: 10px 0;
}
.custom-counter {

  list-style-type: none;
}

.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 10px;
  text-indent: -48px;

}

.custom-counter li::before {

        content: counter(step-counter);
    margin-right: 15px;
    font-size: 90%;
    background-color: #38b6ff;
    color: white;
    font-weight: bold;
    top: 11px;
    position: relative;
    padding: 6px 13px;
    border-radius: 25px;
}



</style>
<body>
<ol class="custom-counter">
                    <li>Note the no.of times to scan and the time period to scan the productNote the no.of times to scan and the time period to scan the productNote the no.of times to scan and the time period to scan the product</li>
                    <li>Note the no.of times to scan and the time period to scan the product</li>
                    <li>Receive Instant Cash on successfully scanning the product</li>                   
                </ol>

</body>
</html>

Upvotes: 0

Views: 50

Answers (2)

Krupal Panchal
Krupal Panchal

Reputation: 1545

You can keep top: 0 in .custom-counter li::before.

Upvotes: 0

Nova
Nova

Reputation: 364

Just remove the top: 11px; in .custom-counter li::before. Like this: 

<!DOCTYPE html>
<html>
<style>
ol{
        padding: 0 10%;
    font-size: 16px;
    margin: 0 25px;
}
li{
        padding: 10px 0;
}
.custom-counter {

  list-style-type: none;
}

.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 10px;
  text-indent: -48px;

}

.custom-counter li::before {

    content: counter(step-counter);
    margin-right: 15px;
    font-size: 90%;
    background-color: #38b6ff;
    color: white;
    font-weight: bold;
    //top is removed
    position: relative;
    padding: 6px 13px;
    border-radius: 25px;
}



</style>
<body>
<ol class="custom-counter">
                    <li>Note the no.of times to scan and the time period to scan the productNote the no.of times to scan and the time period to scan the productNote the no.of times to scan and the time period to scan the product</li>
                    <li>Note the no.of times to scan and the time period to scan the product</li>
                    <li>Receive Instant Cash on successfully scanning the product</li>                   
                </ol>

</body>
</html>

Upvotes: 1

Related Questions