Question

我有以下HTML ...

<div id="q">
  <dl>
    <dt><p>lorem ipsum</p></dt>
    <dd><span>lorem ipsum</span></dd>
    <dd><span>lorem ipsum</span></dd>
    <dd><span>lorem ipsum</span></dd>
    <dd><span>lorem ipsum</span></dd>
  </dl>
</div>

对于我的情况，这是非常必要的css ......

#q dd:before{
    content: " ";
    /*height: 65px;*/
}

但是需要根据内容创建高度，就像高度是动态的一样。因此，我需要使用jQuery创建它....

//for test 
var h = '65px';
//problem occurs here
$('#q dd:before').css('height',h);

检查时，#q dd:before选择器中未添加高度。

jQuery不支持:before和:after伪类。

你对jQuery或javascript有什么想法吗？

Answer 1

您无法使用jQuery定位伪元素，而是可以向dd元素添加类：

$('#q dd').addClass('active');

然后在CSS中基于此类设置样式：

#q dd.active:before{
    height: 65px;
}

<强> Updated Fiddle

如果您想使用动态值，则可以设置<style>，然后将其附加到<head>部分：

var h = '65px';

$('<style>#q dd:before{height:'+h+'}</style>').appendTo('head');

<强> Updated Fiddle

如何在伪类之前和之后应用css？

1 个答案: