：伪样本在样式表中使用并导入反应

Question

我正在使用style-loader和css-loader在react中导入样式表：

require('../css/gallery/style.css');

样式表工作正常，但此规则除外：

.grid::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

我已经有一个div属于grid类：

<div className="grid">
    {display_images}
</div>

这里不会创建由:after伪类创建的新元素。我知道React不支持其内联样式中的伪类，但我不知道是否允许我们在样式表中使用它们然后导入它们。如果不允许，有哪些替代方案？

Answer 1

使用单个冒号，而不是两个冒号：.grid: after { /* your code*/ }。同时确保您的班级.grid有position: relative。

Answer 2

您在问题中显示的CSS之后并没有显示任何内容。我不能保证这是您的解决方案，无需进一步调查，但我建议您添加一个临时背景颜色，以便您可以看到效果。

请参阅以下JSFiddle示例：

https://jsfiddle.net/o410b2h5/

.grid::after 
{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
}

背景：红色;