1

我正在尝试更改我的 css 中伪元素的 cssleft位置:before。如果实际上可以使用 jQuery 更改此对象的位置，我尝试的代码无效。我必须使用 :before css。

在 jsfiddle 中，我试图将深灰色方块移动到其位置右侧 75px：http: //jsfiddle.net/7RZkX/

这是代码：

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"})
 });
4

2 回答 2

1

由于$('p.boxText:before')返回一个空的 jQuery 包装对象，只需添加另一个 css 规则

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

你的js变成了

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

这样做可以更好地分离 javascript 和样式。无论如何，如果您只是想将 pseudoelement 居中:before，那么根本不需要javascript。简单使用

p.boxText:before{
    content  : "***";
    ...
    width    : 25px;
    position : absolute; top: -15px; left: 50%; 
    margin-left: -12px; 
}
于 2013-01-23T10:50:16.770 回答
0

试试这个：

JS: $(function () { $('p.boxText').addClass("me"); });

CSS：p.boxText.me:before{left:75px;}

于 2013-01-23T10:50:38.373 回答