Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用していますSWELLについて

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

番号表示

以前、[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;
}
よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX