[CSS] :before 擬似要素で番号表示

番号表示

以前、[CSS]:befor や :after 擬似要素を活用する をご紹介しました。今回は、<ol> でなくても番号表示をCSSのcounter-increment: title;で振る方法を紹介します。

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;
}

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください