如何添加逻辑来控制 CSS“之后”伪元素？答案

【问题标题】：How do I add a logic to control CSS "After" Pseudo-elements?如何添加逻辑来控制 CSS“之后”伪元素？
【发布时间】：2022-01-13 10:33:12
【问题描述】：

目前我在 pug 和 vue 代码中有这个 html，它工作正常。基本上箭头宽度是动态的。

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

这是我使用 SCSS 的 CSS

.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;
  }
}

我将图像用作箭头。

我不知道如何使用 Vuejs 以某种逻辑隐藏箭头。即当 progressBar.index 等于 1 时。我的箭头位于 after 伪元素。

我尝试将类似的示例放入我的代码笔中。

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

【问题讨论】：

您的问题得到解答了吗？如果是，请选择一个答案。如果否，请发表评论并说明答案如何不符合您的需求。
抱歉，您指的是哪个问题？

标签： css vue.js

【解决方案1】：

使用隐藏它的 Vue 条件 CSS 类 hide-arrow。 JS 不能直接访问伪元素。

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

请注意:after 是非常古老的 CSS 2.1 语法。在 CSS 3 中，伪元素必须以 :: 为前缀。

【讨论】：

抱歉，我还是不太清楚如何用 css 类隐藏箭头。我还需要箭体
然后覆盖content CSS 属性。调整答案。