如何用jQuery实现伪类宽度与另一div一致 现有方案无效求助

• 第一个写法是在CSS代码中直接嵌入jQuery语法，CSS本身无法识别、执行JS代码，因此不会生效
• 第二个写法的核心问题是:before这类伪元素不属于页面DOM树，jQuery/JS的选择器无法直接选中伪元素节点，因此调用css()方法修改样式不会生效

目前最通用的实现方式是借助CSS自定义属性（CSS变量）传递宽度值，具体代码如下：

1. CSS部分 #

.myclass:before {
  /* 必须设置content，空字符串也可，否则伪元素不会渲染 */
  content: "";
  /* 根据需求设置display，inline类型的元素设置width无效，可设为block/inline-block等 */
  display: block;
  /* 引用CSS变量获取宽度 */
  width: var(--mydiv-width);
  /* 其他你需要的伪元素样式 */
}

2. JS部分（适配你原使用的jQuery语法） #

// 获取div.mydivclass的宽度，拼接px单位
const divWidth = $("div.mydivclass").width() + "px";
// 把宽度值赋值给.myclass元素上的CSS变量
$(".myclass").css("--mydiv-width", divWidth);

如果div.mydivclass的宽度会随窗口缩放、DOM改动动态变化，需要添加事件监听实时更新变量值：

// 窗口大小变化时更新宽度
$(window).on("resize", () => {
  const divWidth = $("div.mydivclass").width() + "px";
  $(".myclass").css("--mydiv-width", divWidth);
});

可选无JS方案（仅适用特定结构） #

如果.myclass是div.mydivclass的直接子元素，无需JS，直接给伪元素设置width: 100%即可继承父元素宽度。

• 伪元素必须设置content属性，哪怕值为空字符串，否则伪元素不会被渲染
• 如果伪元素的display属性为inline（默认值），设置width不会生效，需要修改为block、inline-block或者根据定位需求设置为其他支持宽度的类型
• 如果页面上有多个.myclass或者div.mydivclass，需要对应调整选择器的匹配逻辑

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