jquery更改css的绝对位置：伪元素之前

我试图在css中更改伪元素:before的css left位置。我尝试的代码有没有效果，如果它实际上可能改变使用jQuery此对象的位置。我必须使用：之前的CSS。jquery更改css的绝对位置：伪元素之前

在的jsfiddle我想960x75像素移动的暗灰色方块的位置的右侧：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"}) 
});

来源

2013-01-23 huddds

'$（ 'p.boxText：前'）length' // 0 – fcalderan

由于$('p.boxText:before')返回一个空的jQuery包装的对象，只是增加一个CSS规则

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

和你的js变得

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

这样做你的JavaScript和风格较好的分离。无论如何，如果你只是试图以伪元素:before为中心，那么JavaScript根本就没有必要。使用简单

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

来源

2013-01-23 10:50:16 fcalderan

完美，非常感谢。 – huddds

试试这个：

JS： $（函数（）{ $（ 'p.boxText'）addClass（ “我”）; 。}）;

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

来源

2013-01-23 10:50:38 Rajiv007

jquery更改css的绝对位置：伪元素之前

回答

相关问题