如何在伪类之前和之后应用CSS? [英] How to apply the css for before and after pseudo classes?
问题描述
我有以下html ...
I have the following 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 ...
And this is extremely required css for my case...
#q dd:before{
content: " ";
/*height: 65px;*/
}
但是需要根据内容创建高度，就好像高度是动态的一样.因此，我需要使用jQuery创建它....
But the height is needed to be created as per the contents as if the height is dynamic. Thus, I need to create it with jQuery....
//for test
var h = '65px';
//problem occurs here
$('#q dd:before').css('height',h);
检查时，高度未添加到#q dd:before选择器中.
When you inspect it, the height is not added in the #q dd:before selector.
似乎:before和:after伪类.
您对jQuery或javascript有任何想法吗?
Do you have any idea with jQuery or javascript?
推荐答案
您不能使用jQuery定位伪元素，而是可以向dd元素中添加类:
You cannot target pseudo elements with jQuery, instead you can add a class to the dd elements:
$('#q dd').addClass('active');
然后根据您的CSS中的此类设置样式:
then set the style based on this class in your CSS:
#q dd.active:before{
height: 65px;
}
Updated Fiddle
如果要使用动态值，则可以设置<style>，然后将其附加到<head>部分:
If you want to use dynamic value, then you can set a <style> then append it to the <head> section:
var h = '65px';
$('<style>#q dd:before{height:'+h+'}</style>').appendTo('head');
Updated Fiddle
这篇关于如何在伪类之前和之后应用CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
