CSS ::before ::after伪元素动态宽度

Question

我希望能够使用单个

元素和CSS伪元素如::before制作分级星形进度条。

唯一无法通过Javascript操纵的是::before元素的宽度。

这是我的示例：

.review-rate {
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAIAAAAGkY33AAACp0lEQVRIx6VVz29MURQeC5UQ/AHCAgv+AT9KRBGNBSsre0IiQVjYCLGpiDFl0UqxaqdaDQkVGWVU40eGEtFFabWNVlKJtNMgmtJ2Pt9597575973XtPEyVmc851z5t53zrnfpBCV4TweHUK2Ek2bRGnQJRiRlOONf0TbHnSeQrHPwekSZIgJ8cVfu9C4EcV+JEnxMxo3YORZpHj8k9xwasLJHn2Nb28chAlNm835qriElh1S78mdvbi7L3J+H1qqpEQXf3mM/DE/6eeIVFJpeMJkluji3EF8/+BnvDiLgfuiNDxhMkt0cfM2jb67ipvr0bpLlHebnRaloRCGmKAkuyUsvrVdQzNTaD+AwoWYVhNkiAlKgpKgWBpgpISu0+g4olqiEboELQLZHP/aRpq34s8vbdMILukI51rWsB4b+PsbrTvlnO40ui+LQZdgfMO8UQ09ROdJ3NuPV+dFaXA3CcaPSpakyi5J/jjqVmAoF/5WTlyCZkmkW6Wy9Rzrtev5vh4/hp0vpEswYT0D4cZz76NLahezP+FhmCd5ezeennD6Jx3qEZChxCdphM1gMxUTcIpUukGH5iSDcia5vhbpClEa82USdvJiKl4ZmotJapclViqtXZrAJFeW+6lkJbbXA5nmMwm3N3rO4AMMtMfg8irKmSSaUb8SpRlRGtGowyTR8Mtz+otoRKP2YXAYCnpyFBODWqcndTENAzJBZTasCYs5TAWlF6E3m7ieDDFBZ1aExRyAvdICFGriaKhGQibNFt9Y53/SaMFnfy/BXttrWGaxJTpDjATjG+aNin9oMvtZPD8jSoNCMH5UsiSVNvA2g8kxtFWHv1UtLkGTQD7wmcSsZ8dhXFvlnEOXYMJ6hkzitH3+D+N/n6THJA2rcWkhMktkkAlM8g8rt+IWmuHa2gAAAABJRU5ErkJggg==);
 background-repeat: repeat-x;
 width: 100px;
 height: 18px;
}
.review-rate::before {
 content: "";
 display: block;
 width: attr(data-width);
 height: 18px;
 width: 55%;
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAIAAAAGkY33AAACp0lEQVRIx6VVz29MURQeC5UQ/AHCAgv+AT9KRBGNBSsre0IiQVjYCLGpiDFl0UqxaqdaDQkVGWVU40eGEtFFabWNVlKJtNMgmtJ2Pt9597575973XtPEyVmc851z5t53zrnfpBCV4TweHUK2Ek2bRGnQJRiRlOONf0TbHnSeQrHPwekSZIgJ8cVfu9C4EcV+JEnxMxo3YORZpHj8k9xwasLJHn2Nb28chAlNm835qriElh1S78mdvbi7L3J+H1qqpEQXf3mM/DE/6eeIVFJpeMJkluji3EF8/+BnvDiLgfuiNDxhMkt0cfM2jb67ipvr0bpLlHebnRaloRCGmKAkuyUsvrVdQzNTaD+AwoWYVhNkiAlKgpKgWBpgpISu0+g4olqiEboELQLZHP/aRpq34s8vbdMILukI51rWsB4b+PsbrTvlnO40ui+LQZdgfMO8UQ09ROdJ3NuPV+dFaXA3CcaPSpakyi5J/jjqVmAoF/5WTlyCZkmkW6Wy9Rzrtev5vh4/hp0vpEswYT0D4cZz76NLahezP+FhmCd5ezeennD6Jx3qEZChxCdphM1gMxUTcIpUukGH5iSDcia5vhbpClEa82USdvJiKl4ZmotJapclViqtXZrAJFeW+6lkJbbXA5nmMwm3N3rO4AMMtMfg8irKmSSaUb8SpRlRGtGowyTR8Mtz+otoRKP2YXAYCnpyFBODWqcndTENAzJBZTasCYs5TAWlF6E3m7ieDDFBZ1aExRyAvdICFGriaKhGQibNFt9Y53/SaMFnfy/BXttrWGaxJTpDjATjG+aNin9oMvtZPD8jSoNCMH5UsiSVNvA2g8kxtFWHv1UtLkGTQD7wmcSsZ8dhXFvlnEOXYMJ6hkzitH3+D+N/n6THJA2rcWkhMktkkAlM8g8rt+IWmuHa2gAAAABJRU5ErkJggg==);
 background-repeat: repeat-x;
 background-position: 0 -18px;
}

<div class="review-rate" data-toggle="review" data-value="3.5" data-width="50" data-count="17"></div>

有没有办法操作::before元素的width？

也许可以尝试使用width: attr(data-width);？

非常感谢您的帮助。

- zur4ik

---

我还没有尝试过使用attr()来设置宽度，但你可能需要添加单位，例如 width: attr(data-width)px;。 - Jon Snow

我尝试了这个，但它并没有起作用。不管怎样还是谢谢。 - zur4ik

这个线程包含所有的解释链接。 - Max Novich

Answer 1

我知道一种动态改变 :before 和 :after css 的方法，正如 @Brett DeWoody 提到的那样，添加样式标签。

在您的情况下，您可以简单地切换 :before 和 div 的角色。然后使用 div 宽度代替 :before。像这样：

.review-rate {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAIAAAAGkY33AAACp0lEQVRIx6VVz29MURQeC5UQ/AHCAgv+AT9KRBGNBSsre0IiQVjYCLGpiDFl0UqxaqdaDQkVGWVU40eGEtFFabWNVlKJtNMgmtJ2Pt9597575973XtPEyVmc851z5t53zrnfpBCV4TweHUK2Ek2bRGnQJRiRlOONf0TbHnSeQrHPwekSZIgJ8cVfu9C4EcV+JEnxMxo3YORZpHj8k9xwasLJHn2Nb28chAlNm835qriElh1S78mdvbi7L3J+H1qqpEQXf3mM/DE/6eeIVFJpeMJkluji3EF8/+BnvDiLgfuiNDxhMkt0cfM2jb67ipvr0bpLlHebnRaloRCGmKAkuyUsvrVdQzNTaD+AwoWYVhNkiAlKgpKgWBpgpISu0+g4olqiEboELQLZHP/aRpq34s8vbdMILukI51rWsB4b+PsbrTvlnO40ui+LQZdgfMO8UQ09ROdJ3NuPV+dFaXA3CcaPSpakyi5J/jjqVmAoF/5WTlyCZkmkW6Wy9Rzrtev5vh4/hp0vpEswYT0D4cZz76NLahezP+FhmCd5ezeennD6Jx3qEZChxCdphM1gMxUTcIpUukGH5iSDcia5vhbpClEa82USdvJiKl4ZmotJapclViqtXZrAJFeW+6lkJbbXA5nmMwm3N3rO4AMMtMfg8irKmSSaUb8SpRlRGtGowyTR8Mtz+otoRKP2YXAYCnpyFBODWqcndTENAzJBZTasCYs5TAWlF6E3m7ieDDFBZ1aExRyAvdICFGriaKhGQibNFt9Y53/SaMFnfy/BXttrWGaxJTpDjATjG+aNin9oMvtZPD8jSoNCMH5UsiSVNvA2g8kxtFWHv1UtLkGTQD7wmcSsZ8dhXFvlnEOXYMJ6hkzitH3+D+N/n6THJA2rcWkhMktkkAlM8g8rt+IWmuHa2gAAAABJRU5ErkJggg==");
background-position: 0 -18px;
background-repeat: repeat-x;
height: 18px;
overflow: visible;
position: relative;
width: 50px;
}
.review-rate::before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAIAAAAGkY33AAACp0lEQVRIx6VVz29MURQeC5UQ/AHCAgv+AT9KRBGNBSsre0IiQVjYCLGpiDFl0UqxaqdaDQkVGWVU40eGEtFFabWNVlKJtNMgmtJ2Pt9597575973XtPEyVmc851z5t53zrnfpBCV4TweHUK2Ek2bRGnQJRiRlOONf0TbHnSeQrHPwekSZIgJ8cVfu9C4EcV+JEnxMxo3YORZpHj8k9xwasLJHn2Nb28chAlNm835qriElh1S78mdvbi7L3J+H1qqpEQXf3mM/DE/6eeIVFJpeMJkluji3EF8/+BnvDiLgfuiNDxhMkt0cfM2jb67ipvr0bpLlHebnRaloRCGmKAkuyUsvrVdQzNTaD+AwoWYVhNkiAlKgpKgWBpgpISu0+g4olqiEboELQLZHP/aRpq34s8vbdMILukI51rWsB4b+PsbrTvlnO40ui+LQZdgfMO8UQ09ROdJ3NuPV+dFaXA3CcaPSpakyi5J/jjqVmAoF/5WTlyCZkmkW6Wy9Rzrtev5vh4/hp0vpEswYT0D4cZz76NLahezP+FhmCd5ezeennD6Jx3qEZChxCdphM1gMxUTcIpUukGH5iSDcia5vhbpClEa82USdvJiKl4ZmotJapclViqtXZrAJFeW+6lkJbbXA5nmMwm3N3rO4AMMtMfg8irKmSSaUb8SpRlRGtGowyTR8Mtz+otoRKP2YXAYCnpyFBODWqcndTENAzJBZTasCYs5TAWlF6E3m7ieDDFBZ1aExRyAvdICFGriaKhGQibNFt9Y53/SaMFnfy/BXttrWGaxJTpDjATjG+aNin9oMvtZPD8jSoNCMH5UsiSVNvA2g8kxtFWHv1UtLkGTQD7wmcSsZ8dhXFvlnEOXYMJ6hkzitH3+D+N/n6THJA2rcWkhMktkkAlM8g8rt+IWmuHa2gAAAABJRU5ErkJggg==");
background-repeat: repeat-x;
content: "";
display: block;
height: 18px;
position: relative;
width: 100px;
z-index: -1;
}

 <div class="review-rate" data-toggle="review" data-value="3.5" data-width="50" data-count="17"></div>

- Imran Bughio

Answer 2

虽然不是最理想的方式，但你可以使用jQuery在页面上添加一个新的<style>元素，将新的width值添加进去。

$('head').append('<style>.review-rate:before{width:75%}</style>');

这里有一个演示。Demo。 更新
如下方评论中Imran指出的，上述方法会随着时间的推移导致许多<style>标签。为了防止这种情况发生，可以使用append和replaceWith结合的方式，以保持<style>标签数量最少。

if ($('head style[data-class="review-rate"]').length) {
    $('head style[data-class="review-rate"]').replaceWith('<style data-class="review-rate">.review-rate:before{width:75%}</style>')       
} else {
    $('head').append('<style data-class="review-rate">.review-rate:before{width:35%}</style>');
}

- Brett DeWoody

---

True @ImranBughio。然而，一些更高级的jQuery可能会解决这个问题。例如，您可以使用append和replaceWith而不是仅使用append来防止太多的样式标签。演示已经更新了一个例子。 - Brett DeWoody

只是想提醒一下，你不需要用到jQuery，DOM API中已经包含了你所需要的方法：document.head.querySelector、parentElement.appendChild和parentElement.replaceChild。 - Max Heiber