Css 如何制作：之前&；：伪元素填充后剩余宽度？

所以我试图在一个页面上编辑这个现有的小部件。我没有编辑源代码的权限，所以我希望能够完全在CSS中进行编辑。与其试图解释，我认为粘贴所需行为的图像更容易——即有一个左部分（：before）和右部分（：after）——随着拆分器的移动，每个伪元素的宽度应该相应地改变

下面是小部件代码/结构的基本版本的JSFIDLE

HTML

JS（请注意，我无法在真实站点中访问JS-下面这个示例中的滑块只是为了在调试时方便地更改拆分器的位置（无需添加拖动功能）

我尝试过各种方法（使用flex、inline、grid、float、margins等）而且，如果更简单的话，真实的宽度不一定要精确——这是一个纯粹的视觉小部件，因此可以将右侧部分设置为100%宽度，然后只有左侧部分是动态的，并且通过给它一个更高的z索引将其定位在右侧上方，如果更容易——也就是说，如果右部分硬编码为100%宽度，而左部分从css中派生出80%宽度，则会产生80:20分割的幻觉（即使技术上是80:100），这很好

---

无论如何，我怀疑我遗漏了一些非常明显的东西，所以如果有人能够让它工作，那就太棒了。谢谢

当页面加载时，你不可能直接使用JS访问伪元素，因为它们不是

DOM

的一部分

但是，您可以这样做，创建一个新的

样式

元素，它将为您的

包装器

运行下面的代码段以查看它是否正常工作

document.getElementById（“滑块”）.addEventListener（“更改”，函数（）{
document.getElementById（“拆分器”）.style.left=this.value+“%”；
var sytleElement=document.head.appendChild（document.createElement（“style”）；
sytleElement.innerHTML=“#包装器：在{width:“+this.value+'%'+“}”之前”；
})

body，
html{
身高：100%；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
背景：#222；
}
输入{
边缘顶部：10px；
}
#包装纸{
宽度：500px；
高度：50px；
背景：#444；
位置：相对位置；
显示器：flex；
}
/*左*/
#包装器：：之前{
内容：''；
宽度：10%；
高度：50px；
背景：线性梯度（0deg，#00be1abf，#5fed00b3）；
位置：绝对位置；
左：0px；
}
/*对*/
#包装器：：之后{
内容：''；
宽度：50px；
高度：50px；
背景：线性梯度（0度，#9f0000ff，#f10000ff）；
位置：绝对位置；
右：0px；
}
#分离器{
位置：相对位置；
转化：translateX（-50%）；
背景：ddd；
高度：50px；
宽度：10px；
z指数：99；
}

谢谢，伙计。我在想，如果在CSS中似乎不可能的话，我可能不得不这样做。我会在真实站点的拆分器元素上使用一个MutationObserver，因为我将无法访问onchange事件。好吧，我已经投票了。如果没有人只发布CSS，我会将其标记为答案solution@CSStuck不用担心，我会的ubt如果有CSS唯一的解决方案来解决你在JS中使用onchange函数的问题。谢谢。

<div id='wrapper'>
  <div id='splitter' style='left: 50%'></div>
</div>
<input id='slider' type='range' min='0' max='100' value='50'/>

body, html{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #222;
}

input{
  margin-top: 10px;
}

#wrapper{
  width: 500px;
  height: 50px;
  background: #444;
  position: relative;
  display: flex;
}

/*left*/
#wrapper::before{
  content:'';
  width: 50px;
  height: 50px;
  background: linear-gradient(0deg,#00be1abf,#5fed00b3);
  position: absolute;
  left: 0px;
}

/*right*/
#wrapper::after{
  content:'';
  width: 50px;
  height: 50px;
  background: linear-gradient(0deg,#9f0000ff,#f10000ff);
  position: absolute;
  right: 0px;
}

#splitter{
  position: relative;
  transform: translateX(-50%);
  background: #ddd;
  height: 50px;
  width: 10px;
  z-index: 99;
}

document.getElementById("slider").addEventListener("change", function(){
  document.getElementById("splitter").style.left = this.value + "%";
})