Как добавить анимированный GIF в псевдоэлементе: after?

Question

Я хочу добавить анимированный GIF, используя псевдоэлемент :after:

#shipment-history tbody .history-row .enroute:after {
    content:url(https://susscargologistics.com/wp-content/uploads/2020/04/green.gif);
    clear:both;
    height:20px;
    width:20px;
}

Я попробовал приведенный выше код. Это действительно показывает изображение, но это не анимировано. Высота и ширина тоже не работают.

Answer 1

Вы можете использовать gif как background-image в псевдоэлементе вместо его использования в content.

#shipment-history tbody .history-row .enroute:after {
    content:'';
    clear:both;
    height:20px;
    width:20px;
    display:block;
    background-image: url(https://susscargologistics.com/wp-content/uploads/2020/04/green.gif);
    background-size:100%;
}

<table id="shipment-history">
<tbody>
  <tr class="history-row">
    <td class="enroute"></td>
  </tr>
</tbody>
</table>