如何使用jQuery修改类的:before伪元素CSS样式

首先说最核心的结论：:before（标准写法为::before）、:after这类伪元素根本不是真实的DOM节点，不会出现在DOM树里，你没办法用jQuery的选择器直接选中它，也没法直接调用.css()方法改它的样式，所有修改伪元素样式的方案都是间接实现的，常用的有三种：

• 方案1：预定义CSS类，切换父元素类名（优先用这个）
  这是性能最好、最不容易出bug的写法。提前把你要改的伪元素样式写成一个新的CSS类，需要改样式的时候直接给.file__add加这个类就行。
  先写CSS：

  /* 原有默认样式 */
  .file__add:before {
    content: '';
    width: 56px;
    height: 56px;
  }
  /* 宽度200px的扩展样式 */
  .file__add.wide-icon:before {
    width: 200px;
  }
  

  jQuery逻辑非常简单：

  $('.file__add').addClass('wide-icon')
  

• 方案2：用CSS变量做中转，支持动态传值
  如果你需要根据业务场景动态设置不同的宽度，不是固定的200px，可以用CSS变量实现，伪元素可以继承父元素上的CSS变量值。
  先把原有CSS的宽度值替换成变量，留好默认值：

  .file__add:before {
    content: '';
    width: var(--before-w, 56px);
    height: 56px;
  }
  

  之后你用jQuery给父元素设置这个CSS变量就行，写法和改普通CSS属性几乎没区别：

  // 想改多少改多少
  $('.file__add').css('--before-w', '200px')
  

• 方案3：动态插入样式规则，不用改原有CSS
  如果你没法改动已经写好的旧CSS，可以直接往页面head里插一个style标签，写覆盖样式：

  $('<style>.file__add:before{width:200px!important}</style>').appendTo('head')
  

别用遍历stylesheet改规则的写法，兼容性差不说，样式优先级很容易乱，出问题根本不好排查。

内容的提问来源于stack exchange，提问作者Mammadali Mammadaliyev