:after pseudo class not functioning properly when included in stylesheet and imported into React

I am currently utilizing style-loader and css-loader for importing stylesheets in a react project:

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

Everything in the stylesheet is working smoothly, except for one specific rule:

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

There is already a div with the grid class in my code:

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

The element that should be created by the :after pseudoclass is not appearing as expected. It's known that React doesn't support pseudoclasses in inline styles, but is there a way to utilize them in external stylesheets and then import them? If not, what are the alternative solutions?

javascriptcssreactjswebpack

Answer №1

The CSS code you provided in your question does not seem to be displaying anything. To troubleshoot this issue, I suggest adding a temporary background color to see if it makes a difference.

For an example, you can check out the JSFiddle link below:

https://jsfiddle.net/o410b2h5/

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

background: red;

Answer №2

Remember to only use one colon, not two, when styling your grid with .grid: after { /* your code*/ }. Additionally, make sure that your .grid class has the property position: relative.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring AngularJS Navigation in Windows 8 App Store Applications

Hello, I recently started learning about developing Windows Store apps. I found a way to incorporate AngularJS into my Windows 8 store app by making some adjustments in the AngularJS library. However, I'm now struggling with implementing AngularJS rou ...

javascriptangularjswindows-store-apps

What is the best way to vertically center my footer text?

footer { text-align: center; color: #FFF; position: fixed; bottom: 0px; width: 100%; height: 90px; background-color: #464646; } <footer> &copy; Name </footer> I am looking to center my name within the footer, however, it cu ...

htmlcssfooter

Removing item from Angular service

Within my Angular 2 application, I have created a service called events.service.ts: const EVENTS = { 1512205360: { event: 'foo' }, 1511208360: { event: 'bar' } } @Injectable() export class EventsService { getEvents() ...

javascriptangularangular-services

Guide on displaying numerous models using useFBX from @react-three/drei

I am facing an issue while using useFBX from @react-three/drei to display multiple components. Despite calling the function twice, only one component is showing up in the scene. This is the code I have for rendering a tree in the scene: import { useBox } ...

reactjsthree.jsreact-three-fiber

Is there a way to specifically target CSS media queries if the device resolution is similar, but the device screen size (measured in inches) varies

I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...

javascriptandroidjquerycss

Using the increment operator within a for loop in JavaScript

this code snippet causes an endless loop for (let i = 0; ++i;) { console.log(i) } the one that follows doesn't even run, why is that? for (let i = 0; i++;) { console.log(i) } I want a thorough understanding of this concept ...

javascriptnode.jstypescript

Potential Unresolved Promise Rejection in React Native

When attempting to run the application, I encountered an issue where the server was not working and Node.js displayed an error message. I am unable to determine the cause of this error. Can anyone please assist me in resolving this issue? As a newcomer t ...

node.jsreactjsreact-nativenative

How can JavaScript be used to prevent pinch and zoom functionality on Google Maps?

In my project, I am utilizing Google Maps but I want to disable the zooming effect on the map. To achieve this, I have disabled the zoom control using zoomControl: false,. However, this modification only applies to desktops and laptops as they do not suppo ...

javascriptandroidiosgoogle-mapsgoogle-maps-api-3

Prevent automatic merging of JSON data with identical IDs

My AJAX call to a PHP select request is as follows: $.ajax({ type: "POST", url: "/renforts/_getIntervenantManager", data: { IDMission : IDMission, IDManager : IDManager }, dataType : 'json' ...

javascriptphpsqljsonajax

Upon encountering an expression, the code anticipated either an assignment or a function call, but instead found an expression, triggering the no

When using the forEach method within a function in JavaScript, I encountered a code compilation failure with the following error: Expected an assignment or function call and instead saw an expression no-unused-expressions. This error occurs for both ins ...

javascriptreactjseslint

What is the best way to utilize the @Import CSS rule in my code?

After using CSS for a considerable amount of time, I have successfully utilized the @import rule in the past. However, I am currently encountering an issue with it on a new project. Is there anyone who can offer assistance? Here is the code: @import url(&a ...

htmlcss

Utilizing jQuery's .ready() method within the body section of a document to modify the onload event following the printing of the body

Recently, I took over a tabbed page that uses multiple queries to determine which tabs should be displayed. My goal is to add some PHP logic that will automatically set focus on a specific tab when the page finishes loading. I'm wondering if it&apos ...

javascriptjquery

React Ant Design: Encountered a warning for 2 elements having non-unique properties

I have incorporated the Carousel component, with each one containing a different component. One contains a form, while the other includes an external library component called react-input-otp. https://codesandbox.io/s/pensive-einstein-uucvm?fontsize=14& ...

javascripthtmlreactjsantd

Show a variety of pictures in a random arrangement?

Looking for some help here! I'm trying to shuffle my images in a random order each time the page is refreshed. It's like a game of musical chairs but with pictures! Does anyone know how to achieve this? I've done some searching, but haven& ...

javascriptphphtml

Implementing the #toolbar=0 parameter to the src attribute of a PDF file in ReactJS

Is there a way to display a PDF in a modal window without the toolbar appearing? The current method I am using involves importing the PDF as a variable and then appending #toolbar=0 to the end of the URL. However, I cannot figure out how to properly append ...

reactjs

What is the process for generating a new object by outputting key-value pairs?

I have an array that I'm trying to use to create a new object with specific keys and values. const arr = [ { name: 'ab', key: '584577', }, { name: 'cd', key: '344926', }, { name: &a ...

javascriptreactjs

Create a component that integrates a React RadioGroup into a Table Cell

I have a web page with multiple radio button elements organized in a table format. To achieve this layout, I utilized Material UI's RadioButton and Table components. Although the functionality is working as expected, there is an issue of screen flicke ...

reactjsmaterial-ui

Ways to eliminate spacing between two select boxes?

Hey everyone, I'm sure we've all encountered this issue before and can agree that it's pretty annoying. Does anyone have a solution for removing the white space from select boxes? <select> <option> testing </option& ...

htmlcss

A Step-by-Step Guide to Mocking a jQuery Function Using Jasmine in an Angular Directive Specification

When working with an angular directive, I am currently using $(element).fdatepicker(). How can I mock or stub this function in a jasmine test for the directive? If I don't stub it, I encounter the following error: TypeError: 'undefined' is ...

javascriptangularjsangularjs-directivejasmine

Trouble mapping an array of objects in ReactJS

I'm encountering an issue where I am unable to map through an array of objects in my component. Although I have used this map method before, it doesn't seem to be working now. Can anyone help me figure out what's going wrong? import React, ...

javascriptreactjs