How do I apply transitions to pseudo elements?

I'm building a react application and I'm having a problem applying a CSS transition on a pseudo element.

Here is the class for the pseudo element:

.collapsed::before {      content: '';      position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;      background-image: linear-gradient(transparent, transparent, white, white);      z-index: 100;      opacity: 1;    transition: opacity 2s;  }  

This creates an overlay on top of the "collapsed" div which has this effect:

When the user clicks the READ MORE button, I would like the white gradient to fade away. So I have this class:

.expanded::before {    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-image: linear-gradient(transparent, transparent, white, white);    z-index: 100;    opacity: 0;  }  

When the user clicks the READ MORE button, I swap out the .collapsed class and apply the .expanded class. The idea is that the .collapsed::before pseudo element has an opacity of 1 and an opacity transition of 2 seconds. The .expanded::before pseudo element has opacity 0. So I would expect the opacity to transition from 1 to 0 in 2 seconds.

But it doesn't work. My guess is that it's because the collapsed pseudo element is a different element than the expanded pseudo element. Transitions only work when you change styles or classes on the SAME element.

But then how does one change styles or classes on the same pseudo element?

https://stackoverflow.com/questions/65839588/how-do-i-apply-transitions-to-pseudo-elements January 22, 2021 at 01:05PM