能否条件性显示:before伪元素的content？有无更简洁实现方案？

在值可动态变化的字段中，能否控制:before伪元素的content（比如设置为'+'）的显示规则：当字段值为空时不显示该字符，值大于0时显示'+'？目前已通过额外类实现（示例代码如下），想知道有没有更简洁的实现方式，比如仅用CSS完成，或者能否借助calc()实现？

现有实现代码 #

JavaScript #

const calc = (ev, o) => {
  const div = document.querySelector('div');
  const _ = parseInt(div.innerHTML)
  let val = !isNaN(_) ? parseInt(_) : 0;
  
  div.classList.remove('sign');
  if (o === 'a') {
    div.innerHTML = val + 1;    
    div.classList.add('sign'); 
  } else {
    if (val - 1 <= 0) {
      div.innerHTML = '';      
    } else {
      div.innerHTML = val - 1;
      div.classList.add('sign');
    }
  }
}

CSS #

div {
  width:100px;
  background: green;
  padding:5px;
  height:30px;
}
.sign:before {
  content: '+'
}

HTML #

<div></div>
<button class="a" onclick="calc(this, 'a')">Add</button>
<button class="m" onclick="calc(this, 'm')">Minus</button>

更简洁的实现方式 #

1. 纯CSS结合data属性实现（无需额外类） #

可以通过给元素绑定data-value属性存储数值，用CSS属性选择器直接判断数值状态，自动控制:before的显示，无需手动操作类名：

修改后代码

HTML

<div data-value="0"></div>
<button class="a" onclick="calc(this, 'a')">Add</button>
<button class="m" onclick="calc(this, 'm')">Minus</button>

CSS

div {
  width:100px;
  background: green;
  padding:5px;
  height:30px;
}
/* 仅当data-value不为0或空时显示+ */
div[data-value]:not([data-value="0"]):not([data-value=""]):before {
  content: '+';
}

JavaScript

const calc = (ev, o) => {
  const div = document.querySelector('div');
  let val = parseInt(div.dataset.value) || 0;
  
  o === 'a' ? val++ : val = Math.max(val - 1, 0);
  
  div.dataset.value = val;
  div.innerHTML = val > 0 ? val : '';
}

这种方式把数值存在data-value中，CSS直接通过属性选择器做判断，JS只需要维护数值和显示内容，逻辑更清晰。

2. 关于calc()的可行性 #

calc()仅用于计算长度、百分比等数值型CSS属性值，无法直接控制content的显示逻辑。因为content接收的是字符串、计数器或特殊关键字，calc()的计算结果是纯数值，无法转换为符合content要求的条件判断，所以不能借助calc()实现这个需求。

3. 简化原有类操作的JS实现 #

如果不想用data属性，也可以通过classList.toggle()简化类操作逻辑：

const calc = (ev, o) => {
  const div = document.querySelector('div');
  let val = parseInt(div.innerHTML) || 0;
  
  o === 'a' ? val++ : val = Math.max(val - 1, 0);
  
  div.innerHTML = val > 0 ? val : '';
  // 根据数值自动切换类，无需手动移除再添加
  div.classList.toggle('sign', val > 0);
}

内容的提问来源于stack exchange，提问作者Maik Lowrey