Псевдоэлементы :before
и :after
отображаются внутри элемента, который они изменяют. Это означает, что если вы примените их к таблице, браузер попытается отобразить ее display: block
в таблице, где она не принадлежит. Я подозреваю, что неправильная ширина - это просто артефакт конкретного браузера, который вы используете, пытаясь сделать что-то, что он не должен делать вообще. [Edit: Alohci предоставил объяснение, что браузер молча загружает содержимое :after
в table-cell
, завернутое в table-row
. Это приведет к тому, что содержимое станет шириной одного столбца.]
Возможно, ваш код будет работать так, как ожидалось, если вы примените его к <div>
, обернув <table>
? Добавление <div>
таким образом обычно является хорошей идеей только для того, чтобы получить достаточный контроль над компоновкой таблицы.