::before, :: after requires transition to be added on parent ?

or do we have to add tranisiton to each of these pseudo elements seperately?

3 Replies

It depends? 😅 If you change the opacity of the parent, it'll affect the pseudo-element because it's nested inside the parent. If you add a transition: color 500ms on the parent, it won't influence the pseudo-element. pseudo-elements are, well, elements that are children of the parent, so the same rules follow as if it's a nested paragraph or whatever inside that element.

Mert EfeOP•2y ago

i'm trying to add transition for ::before, ::after on an X Icon rotate hamburger then each of them should get transition for rotate right ::before,::after transition

span,
    span::before,
    span::after {
      transition-property: height, transform;
      transition-duration: 0.5s;

      display: block;
      background: white;
      height: 2px;
      width: 2em;
      border-radius: 2px;
      position: relative;
    }

span,
    span::before,
    span::after {
      transition-property: height, transform;
      transition-duration: 0.5s;

      display: block;
      background: white;
      height: 2px;
      width: 2em;
      border-radius: 2px;
      position: relative;
    }

rotate changes on pseudoelements, height changes only on parent

Kevin Powell•2y ago

What's the code for after they've transformed?

Gaming

Programming

::before, :: after requires transition to be added on parent ?