<div class="heartcastmedia-list-number" >
    <ol start="1">
    <li>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </li>
     <li>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </li>
     <li>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </li>
     <li>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </li>
    </ol>					
</div>
.heartcastmedia-list-number ol{
list-style-type: none;
counter-reset: section;
margin: 0;
    padding: 0;
}
.heartcastmedia-list-number ol li {
    position: relative;
    padding-left: 50px;
}
.heartcastmedia-list-number ol li::before {
    counter-increment: section;
    content: counters(section, ".") " ";
    background-color: rgb(212, 147, 157) !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    color: #fff;
    font-weight: 700;
    top: 0;
    left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.heartcastmedia-list-number ol li::marker {
    content:none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.