<!-- 連番をふる -->
<ul>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
</ul>/* 行頭を揃える */
ul {
box-sizing: border-box;
width: 300px;
padding: 20px;
margin: 0 auto;
background-color: pink;
counter-reset: item;/* カウントをリセットする */
}
ul li {
line-height: 1.3;
}
ul li:not(:last-child) {
margin-bottom: 20px;
}
ul li::before {
counter-increment: item;/* 「item」が増えたらナンバリングさせる */
content: counter(item)".";/* ブラウザに表示させる */
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.