cynicaldevil cynicaldevil - 23 days ago 10
Javascript Question

:after pseudo class not working when using in stylesheet and importing in react

I am using

style-loader
and
css-loader
to import stylesheets in react:

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


The stylesheet's working fine, except for this rule:

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


I already have a
div
which belongs to a the
grid
class here:

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


The new element which should be created by the
:after
pseudoclass is not being created here. I know that React does not support pseudoclasses in its inline styles, but I don't know whether we are allowed to use them in stylesheets and then import them. If it isn't allowed, what are the alternatives?

Answer

The CSS-after that you have shown in your question doesn't display anything. I can't guarantee this is your solution without further investigation but I would recommend adding a temporary background colour so you can see the effect.

see the following JSFiddle for an example:

https://jsfiddle.net/o410b2h5/

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

background: red;

Comments