How do I add a logic to control CSS "After" Pseudo-elements?-CodePudding

Currently I have this html in pug and vue code which is working fine. Basically the arrow width is dynamic.

  .abc--step-bar: .abc--step-bar-color(:style="`width: ${progressBar.width}`")
  .row
    .col(v-for="(item, i) in progressItems")
      .abc--step-item(:)
        span.abc--step-dot

This is my css using SCSS

.abc--step-bar {
  position: absolute;
  top: 0;
  left: 16.7%;
  right: 16.7%;
  height: 3px;
  background: #e8e8e8;      
}

.abc--step-bar-color {
  background: #28A745;
  position: absolute;
  top: 0; bottom: 0; left: 0;
  
  &:after {
    color: #28A745;    
    content: url("../../assets/images/arrow.png");;
    display: inline-block !important;
    width: 0;
    height: 0;        
    position: absolute;
    right: 6px;
    top: -6px;
  }       
}

.abc--step-dot {
  display: inline-block;
  width: 15px;
  border-radius: 50%;
  height: 15px;
  background: #e8e8e8;
  border: 5px solid #e8e8e8;
  position: relative;
  top: -7px;

  .is__done &,
  .is__current & {
    border: 5px solid #28A745;    
    //background: #28A745;
  }
}

I use the image for the arrow head.

I do not know how I can hide the arrow head with certain logic using Vuejs. i.e. when the progressBar.index equals 1. My arrow head is at after Pseudo-element.

I tried to put the similar example in my codepen.

https://codepen.io/steve-ngai-chee-weng/pen/xxXmRer

CodePudding user response：

Use a Vue-conditional CSS class hide-arrow that hides it. JS cannot access pseudo elements directly.

.abc--step-bar-color.hide-arrow::after { content: ""; }

Please note that :after is very old CSS 2.1 syntax. In CSS 3 pseudo elements must be prefixed with ::.