Can't Edit Css Styles For :before, :after?

I have this styling: section.tipos .content > div:before { background: none repeat scroll 0 0 #DDDDDD; content: ' '; height: 10px; left: 32%; position: absol

Solution 1:

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

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.

Then you could have CSS code like this:

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

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.

Solution 2:

Try appending '%' to the css style value:

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