title: How to set style with renderer on div:after and div:before?
body: <p>So when I click first arrow ideally I want to color it all in red and disable other divs. But because it is an arrow I am able to color only the part before the :before and :after part of arrow. </p>
  
  <p>Here is the HTML, CSS and TS code example. I am using Renderer2 to set style to div on action. </p>
  
  <p><a href="https://stackblitz.com/edit/angular-5tuus2" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-5tuus2</a> Here is stackblitz.</p>
  
  <p>Anyone has any ideas?</p>
  
  <pre><code>HTML
  
      &lt;div class="firstArrow" #arrowOne (click)='firstArrowClick()'&gt;&lt;/div&gt;
      &lt;div class="secondArrow" #arrowTwo&gt;&lt;/div&gt;
      &lt;div class="thirdArrow" #arrowThree&gt;&lt;/div&gt;
  
  CSS
  
     .firstArrow {
      position: relative;
      background: rgb(0, 82, 48);
      text-align: center;
      margin-right: 10px;
      margin-left: 0px;
      height: 50px;
      width: 330px;
     float: left;
     z-index: 3;
    }
    .firstArrow:before {
     content: '';
     position: absolute;
     width: 20px;
     height: 50%;
     left: 100%;
     top: 0;
     background: linear-gradient(
      to right top,
      rgb(0, 82, 48) 50%,
      transparent 50%
     );
    }
  
    .firstArrow:after {
      content: '';
      position: absolute;
      width: 20px;
      height: 50%;
      left: 100%;
      bottom: 0;
  
      background: linear-gradient(
       to right bottom,
       rgb(0, 82, 48) 50%,
       transparent 50%
       );
    }
  
   .secondArrow {
     position: relative;
     background: skyblue;
     margin-right: 10px;
     padding-left: 50px;
     padding-top: 7px;
     left: -20px;
     float: left;
     z-index: 2;
  
     height: 50px;
     width: 330px;
    }
   .secondArrow:before {
     content: '';
     position: absolute;
     width: 20px;
     height: 50%;
     left: 100%;
     top: 0;
     background: linear-gradient(
       to right top,
       skyblue 50%,
       transparent 50%
    );
   }
  
   .secondArrow:after {
     content: '';
     position: absolute;
     width: 20px;
     height: 50%;
     left: 100%;
     bottom: 0;
     background: linear-gradient(
      to right bottom,
      skyblue 50%,
      transparent 50%
    );
   }
  .thirdArrow {
     position: relative;
     background: rgb(0, 82, 48);
     text-align: center;
  
     padding-top: 7px;
     height: 50px;
     width: 330px;
  
     left: -40px;
     float: left;
     z-index: 1;
  
   }
  
   .thirdArrow:after {
     content: '';
     position: absolute;
     width: 20px;
     height: 50%;
     left: 100%;
     bottom: 0;
     background: linear-gradient(
       to right bottom,
       rgb(0, 82, 48) 50%,
       transparent 50%
     );
   } 
   .thirdArrow:before {
     content: '';
     position: absolute;
     width: 20px;
     height: 50%;
     left: 100%;
     top: 0;
     background: linear-gradient(
       to right top,
       rgb(0, 82, 48) 50%,
       transparent 50%
    );
   }
  
  
  TS
  
    export class WizardComponent{
  
       @ViewChild("arrowOne", {static: false}) arrowOne: ElementRef;
       @ViewChild("arrowTwo", {static: false}) arrowTwo: ElementRef;
       @ViewChild("arrowThree", {static: false}) arrowThree: ElementRef;
  
       constructor(private renderer: Renderer2) {}
  
  
       firstArrowClick(){
          this.renderer.setStyle(this.arrowOne.nativeElement, 'background', 
          'red');
       }
  
    }
  </code></pre>