0

I have this styling:

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

Which works fine,

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

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.

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});
Ms. Nobody
  • 1,199
  • 3
  • 13
  • 33
Toni Michel Caubet
  • 18,208
  • 50
  • 194
  • 356
  • unfortunately you need a workaround for this, like appending a new ` – Spokey Jun 14 '13 at 12:35

2 Answers2

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.

Spudley
  • 161,975
  • 39
  • 229
  • 303
0

Try appending '%' to the css style value:

$('section.tipos .content > div:before').css({ 'left' : 50+index*17 + '%'});
gitaarik
  • 36,986
  • 11
  • 91
  • 97