My current styling looks like this:
section.tipos .content > div:before {
background: none repeat scroll 0 0 #DDDDDD;
content: " ";
height: 10px;
left: 32%;
position: absolute;
top: -10px;
width: 10px;
}
It's working perfectly, but I need to change the left property percentage when certain events occur.
I understand that I could achieve this by adding classes or inline styles. However, my boss prefers not to use unnecessary class names unless absolutely necessary.
The question is: Is it possible to modify the CSS of a pseudo selector using JavaScript? I attempted something like the code below, but it didn't work as expected.
$('section.tipos .content > div:before').css({ 'left' : 50+index*17});