以前、[CSS]:befor や :after 擬似要素を活用する をご紹介しました。今回は、<ol> でなくても番号表示をCSSのcounter-increment: title;で振る方法を紹介します。
INDEX
html
dtとddでddの頭に番号表示します。
<dl class="number">
<dt>見出し</dt>
<dd>dtに番号をふる</dd>
</dl>
CSS
自動的に +1 して番号表示してくれます。
dl.number dt {
text-align: left;
font-size: 120%;
font-weight: normal;
position: relative;
padding: 0 0 .4em 3em;
border-bottom: 1px solid #ccc;
counter-increment: title;
margin-top: 40px;
}
dl.number dt::before {
position: absolute;
top: 0; left: 0;
content: counter(title);
width: 28px;
height: 28px;
line-height: 28px;
background-color: #A4BFC8;
border-radius: 100%;
color: #fff;
font-size: 1em;
font-weight: 600;
text-align: center;
}
コメント ※ハンドルネームでお願いします