无法编辑css样式：before，：after？

我有这个造型：

section.tipos .content > div:before { background: none repeat scroll 0 0 #DDDDDD; content: " "; height: 10px; left: 32%; position: absolute; top: -10px; width: 10px; } 

哪个工作正常，

但是当一些事件发生时，我想将左边的属性更改为不同的％

我知道这可以通过类名或样式实现（当然）。 但我的老板并不喜欢class级名称，除非他们100％需要。

问题是：我可以从javascript更改伪选择器的CSS吗？ 像这样的东西（但是有效）

 $('section.tipos .content > div:before').css({ 'left' : 50+index*17}); 

Answer 1

不，你不能那样做。 :before和:after伪元素无法以任何方式提供给您的Javascript代码。

您可以希望的最好的解决方法是使用您的Javascript来更改主元素的类，并为:before伪元素提供单独的CSS代码，具体取决于它具有哪个类。

然后你可以有这样的CSS代码：

 section.tipos .content > div.newClass:before { .... } 

但是，我注意到您要将宽度设置为计算值; 使用上述技术可能会很棘手。 CSS calc()可能有所帮助，具体取决于所使用的index ，以及取决于您需要的浏览器支持级别。

Answer 2

尝试将’％’附加到css样式值：

 $('section.tipos .content > div:before').css({ 'left' : 50+index*17 + '%'});