Skip to content

Instantly share code, notes, and snippets.

@nksm

nksm/content プロパティの counter を利用してみる.markdown

Created June 2, 2015 01:40
Show Gist options
  • Save nksm/0e51d1a3a67151aa74f7 to your computer and use it in GitHub Desktop.
Save nksm/0e51d1a3a67151aa74f7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nakashima akira created this gist Jun 2, 2015.
    7 changes: 7 additions & 0 deletions content プロパティの counter を利用してみる.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    content プロパティの counter を利用してみる
    ------------------------------
    content プロパティの counter を利用したサンプル。

    A [Pen](http://codepen.io/nksm/pen/EjWYRN) by [nakashima akira](http://codepen.io/nksm) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/nksm/pen/EjWYRN/license).
    15 changes: 15 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    .container
    .item アイテム
    .item アイテム
    .item アイテム
    .item アイテム
    .item アイテム
    .item アイテム

    .container
    .item アイテム
    .item アイテム
    .item アイテム
    .item アイテム
    .item アイテム
    .item アイテム
    16 changes: 16 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    .container {
    margin: 10px;
    }
    .item {
    &:first-child {
    counter-reset: item;
    }
    &::before {
    counter-increment: item;
    content: counters(item, '.');
    margin-right: 10px;
    }
    & > & {
    margin-left: 20px;
    }
    }