带有checked和after标签的css表单复选框样式[重复]

我正在尝试在不使用 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 中运行。怎么了？

对我有用的跨浏览器解决方案是在复选框输入后包含一个空标签（带有“checkbox_label”类），然后设置 IT 样式而不是复选框。

input[type=checkbox] + label:after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:0px;
  top:1px;
  z-index:100;
}

input[type=checkbox]:checked + label:after
{
  content:"";
}

.checkbox_label
{
  height:0px;
  width:0px;
  display:inline-block;
  float:left;
  position:relative;
  left:20px;
  z-index:100;
}