Question

I’m trying to change the css left position of a pseudoelement :before in my css. The code I tried has no effect, if it actually possible to change the position of this object using jQuery. I have to use the :before css.

In the jsfiddle I’m trying to move the darker grey square to the right of its position by 75px: http://jsfiddle.net/7RZkX/

Here’s the code:

Html

  <div id="box">
    <p class="boxText">TEST CONTENT</p>
  </div>

CSS

 #box{width:100px; background-color:#CCC; padding:30px 40px 30px 40px; position:relative; margin-top:120px;}
 .boxText{font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:16px; text-align:center;padding:0px;margin:0px;}
 p.boxText:before{content:"***"; background-color:#999; width:25px; height:15px; position:absolute; left:0px;top:-15px;z-index:20;}

jQuery

 $(function () {
      $('p.boxText:before').css({"position":"absolute", "top":"-15px","left":"75px"})
 });

Answer 1

Since $('p.boxText:before') return an empty jQuery wrapped object, just add another css rule

p.boxText.move:before{ left:75px; }

and your js becomes

$(function () {
   $('p.boxText').addClass('move');
});

Doing this you have a better separation of javascript and style. Anyway if you’re only trying to center the pseudoelement :before, then javascript is not necessary at all. Use simply

p.boxText:before{
    content  : "***";
    ...
    width    : 25px;
    position : absolute; top: -15px; left: 50%; 
    margin-left: -12px; 
}