Javascript 用法：在元素上的伪元素之后

我的网站上有两张图片

当我单击它们时，我想给它们添加一个覆盖。此覆盖是使用

after

伪类创建的

但是，正如您在我的演示中看到的，它不起作用。我哪里做错了

演示：

jQuery（.option”）。在（'click'，function（）上{
jQuery（this）.toggleClass（'option optionActive'）；
});
.option:：after、.optionActive:：after{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示：无；
颜色：#FFF；
}
.optionActive:：之后{
显示：块；
背景：rgba（0,0,0,6）；
}
.col-md-4{
边缘底部：30px；
左边距：0；
右边距：0；
}
@介质（最小宽度：768px）{
.col-md-4{
弹性：0.33.33333%；
最大宽度：33.33333%；
}
}
只需将此添加到我们的代码中即可。谢谢

  .option::after, .optionActive::after {
     content: " ";
   }

试试这个。我已经改变了一些css，请检查这个


jQuery（.option”）。在（'click'，function（）上{
jQuery（this）.toggleClass（'option optionActive'）；
});
.optionActive{
位置：相对位置；
显示：内联块；
}
.选项活动：之后{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
颜色：#FFF；
背景：rgba（0,0,0,0.6）；
内容：“；
位置：绝对位置；
}
.col-md-4{
边缘底部：30px；
左边距：0；
右边距：0；
}
@介质（最小宽度：768px）{
.col-md-4{
弹性：0.33.33333%；
最大宽度：33.33333%；
}
}
您需要添加
内容：“”在css中阅读更多abot元素


jQuery（.option”）。在（'click'，function（）上{
jQuery（this）.toggleClass（'option optionActive'）；
});
.option:：after、.optionActive:：after{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
颜色：#FFF；
内容：''；
}
.optionActive:：之后{
显示：块；
背景：rgba（0,0,0,6）；
}
.col-md-4{
边缘底部：30px；
左边距：0；
右边距：0；
}
@介质（最小宽度：768px）{
.col-md-4{
弹性：0.33.33333%；
最大宽度：33.33333%；
}
}
如果没有内容属性，像after或before这样的pseuso元素将无法工作。您必须在css中指定内容。下面是代码段。您可以在之后阅读更多有关内容


jQuery（.option”）。在（'click'，function（）上{
jQuery（this）.toggleClass（'option optionActive'）；
});
.option:：after、.optionActive:：after{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
内容：“；
颜色：#FFF；
}
.optionActive:：之后{
显示：块；
背景：rgba（0,0,0,6）；
}
.col-md-4{
边缘底部：30px；
左边距：0；
右边距：0；
}
@介质（最小宽度：768px）{
.col-md-4{
弹性：0.33.33333%；
最大宽度：33.33333%；
}
}
删除
显示：无也更新了