css - チェック済みタグとアフタータグを使用したcssフォームチェックボックスのスタイリング

Question

JavaScript または JQuery を使用せずにフォームを設計しようとしています。一連のチェックボックスが含まれています。アイデアは、チェックボックスがオフになっている場合、チェックボックスの後に特定のgifを表示することです。それ以外の場合は、その後に何も表示しません。これは私が持っているコードです:

input[type=checkbox]::after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:15px;
  z-index:100;
}
input[type=checkbox]:checked::after
{
  content:"";
}

Chrome では動作しますが、Firefox や IE では動作しないようです。なにが問題ですか？