How to apply CSS for before and after pseudo classes?
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>
And this is extremely necessary css for my case ...
#q dd:before{
content: " ";
/*height: 65px;*/
}
But the height must be created in accordance with the content, as if the height was dynamic. So I need to create it using jQuery ....
//for test
var h = '65px';
//problem occurs here
$('#q dd:before').css('height',h);
When you check it, the height is not added to the selector #q dd:before.
It seems that :beforeand :afterpseudo-classes are not supported by jQuery.
Do you have any ideas with jQuery or javascript?
0
1 answer
You cannot target pseudo elements on jQuery, instead you can add a class to the elements dd:
$('#q dd').addClass('active');
then set the style based on this class in your CSS:
#q dd.active:before{
height: 65px;
}
, <style>, <head>:
var h = '65px';
$('<style>#q dd:before{height:'+h+'}</style>').appendTo('head');
0