无法编辑css样式：before，：after？ [英] Can't edit css styles for :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;
}

效果不错，

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

But when some events happen I would like to change the left property for a different %

我知道这可以实现（当然）使用类名或样式。但我的老板不喜欢太多类名，除非他们是100％需要。

I know this could be achieved (for sure) using classnames or styles. But my boss doesn't like much the class names unless they're 100% needed.

问题是：从JavaScript的一个伪选择器？这样的东西（但是工作）

Question is: Can I alter the css for a pseudo selector from javascript? Something like this (but that works)

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

推荐答案

：之前和：之后伪元素不以任何方式提供给您的Javascript代码。

No you can't do that. The :before and :after pseudo-elements are not available in any way to your Javascript code.

你希望的最好的解决方法是使用你的Javascript来改变主元素的类，并为：before 伪元素取决于它具有的类。

The best work-around you can hope for is to use your Javascript to change the class of the main element, and have separate CSS code for the :before pseudo-element depending on which class it has.

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

Then you could have CSS code like this:

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

我注意到你想要将宽度设置为计算值;这可能是棘手的使用上述技术。 CSS calc（） 可能会有所帮助，取决于索引是否正在使用，以及您需要的浏览器支持级别。

However, I note that you're wanting to set the width to a calculated value; that might be tricky using the above technique. CSS calc() may help, depending what index is being used for, and depending what level of browser support you need.

这篇关于无法编辑css样式：before，：after？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！