Abstract
before疑似要素とcss counterを使ってゼロパティングありの自動採番を行うサンプルです。
各ステップを示すボックスの左上にある番号の表示がサンプルです。
How to make sushi
このステップはサンプルの文章です(元ネタ: https://twitter.com/molgh/status/726854917214879744)。
First, roll the salmon in rice.
Then...
Holy s***, you ruined everything.
Like everything you do
This sushi like your life
Beginning a lot of things, left undone
And nobody loves you.
How to make sushi(2)
事前準備の材料を最初に追加しましたが、自動的に番号がずれるためステップのコンテナであるHTMLを丸ごとコピーするだけでOKです。
Ingredients
- Seaweed
- Smoked salmon
- Rice
- Soy sauce
First, roll the salmon in rice.
Then...
Holy s***, you ruined everything.
Like everything you do
This sushi like your life
Beginning a lot of things, left undone
And nobody loves you.