Result
tableに行数を表示します。疑似要素にcss-countersで加えています。
前後に任意のテキストも挿入できます。
css
body {/*カウンターリセット*/
counter-reset: row-counter;
}
tr {
position: relative;
}
tr:before {/*行の頭に疑似要素を追加してカウント*/
position: relative;
padding: 10px;
display: block;
bottom: 0;
counter-increment: row-counter;
content: "第"counter(row-counter)"行目";
}
html
<table>
<tr>
<td>foo</td>
<td>bar</td>
<td>hoge</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>hoge</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>hoge</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>hoge</td>
</tr>
</table>
can i use
css-countersのブラウザ対応状況です
