[css]tableのtrに疑似要素を付けるときは気をつけろ

疑似要素なのに要素が増える。

どういうことか

tableを作ったとする。

<table>
    <thead><tr><th></th><th></th><th></th></tr></thead>
    <tbody>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
    </tbody>
</table>

装飾したくてstyleをこうしたとする。

table tbody tr{ position: relative;}
table tbody tr::before{ content: "";}
table tbody tr::after{ content: "";}

このとき、cssというかhtmlだと思うけど、疑似要素がtr内に追加される。

どういうことかというと、tr内のセル数が増える。

::beforeは<tr>の先頭、::afterは<tr>の末尾に追加される。

この場合だと<tbody>の<tr>に疑似要素を作ったわけで、そうすると<thead>の<tr>にあるセル数とズレるので<table>が壊れる。

対処法

疑似要素を使うことが大前提にある場合、全体のセル数が合うようにする必要がある。

今回の例で言えば、以下の2択。

• <thead>内の<tr>にも疑似要素を追加する
• <thead>内の<tr>に要素を追加する

cssで要素を追加してるわけだから、同様に疑似要素で対応したほうがスマート。

そういう話。