JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<ol class="most-commented">
    <li>Comment 1 Comment 1 Comment 1 Comment 1 Comment 1 Comment 1  Comment 1 Comment 1 Comment 1 Comment 1 Comment 1</li>
    <li>Comment 2</li>
    <li>Comment 3</li>
    <li>Comment 4</li>
    <li>Comment 5</li>
</ol>

CSS

.most-commented {
    counter-reset: item;
    list-style: none; /* 기본 목록 스타일 제거 */
    padding-left: 2em; /* 사용자 정의 총알을 위한 공간 확보 */
}

.most-commented li {
    counter-increment: item;
    margin-bottom: 0.5em; /* 항목 간의 간격 */
    position: relative; /* 총알의 위치를 지정하기 위해 필요 */
}

.most-commented li::before {
    content: counter(item);
    background-color: #007BFF; /* 파란색 배경 */
    color: white; /* 흰색 글자 */
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    border-radius: 0.2em; /* 둥근 모서리 */
    margin-right: 0.5em; /* 총알과 텍스트 사이의 간격 */
    position: absolute;
    left: -2em; /* 왼쪽에 총알 위치 */
    border: 2px solid black; /* 검정색 테두리 */
}