Animate the CSS transition property within :after/:before pseudo-classes

Question

Is it possible to animate CSS pseudo-classes?

Say I have:

#foo:after {
    content: \'\';
    width: 200px;
    height: 200px;
    background: red;
          


        

Answer 1

I just found out that you can animate :after and :before (:

Code example-

  .model-item {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: transparent;
      transition: all .3s;
    }
  }

  .opc {
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: rgba(0, 51, 92, .75);
    }
  }

I have the div .model-item and i needed to animate his :after. So i've added another class which changes background and i added the transition code to the main :after (before animation)