0

demo

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 required css for my case...

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

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);

When you inspect it, the height is not added in the #q dd:before selector.

Seems :before and :after pseudo classes are not supported with jQuery.

Do you have any idea with jQuery or javascript?

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • 2
    Since the pseudo-elements are not real DOM elements, you can't target them with jQuery. – Felix Kling Mar 24 '14 at 03:28
  • but :first-child and :last-child are added in jquery what about that? – Bhojendra Rauniyar Mar 24 '14 at 03:29
  • 1
    Those are pseudo-*classes*, not pseudo-elements. Those classes are used to target *existing*, *real* DOM elements, they don't create pseudo-elements. To make the distinction between pseudo-classes and pseudo-elements better, pseudo-elements are prefixed with `::` in CSS3 instead of `:`. – Felix Kling Mar 24 '14 at 03:30
  • @FelixKling your provided answer doesn't answer my question. because that change the content but I need to add height. If you could please answer. – Bhojendra Rauniyar Mar 24 '14 at 03:38
  • You have to resort to one of the workarounds mentioned in the other question. They should not only work with `content` but also with other CSS properties. – Felix Kling Mar 24 '14 at 03:42
  • that has content to which the content is changed through the attr but how can I have to height? – Bhojendra Rauniyar Mar 24 '14 at 03:46
  • NVM, apparently the `attr` CSS function is not supported for values other than string or other properties than `content`, at least not yet. – Felix Kling Mar 24 '14 at 03:49
  • so, hopefully my question is not duplicate of that question. please remove that from my question. – Bhojendra Rauniyar Mar 24 '14 at 03:53
  • Nope, it's still a duplicate. See this answer for multiple solutions: http://stackoverflow.com/a/21709814/218196. You probably have to resort to "2) Add new styles directly to the document's stylesheet" in that list. I don't think you have gone through of all the answers there yet, haven't you? – Felix Kling Mar 24 '14 at 03:59
  • Other answers from the duplicate question that would help are http://stackoverflow.com/a/12952400/218196, http://stackoverflow.com/a/16507274/218196, http://stackoverflow.com/a/12389279/218196 – Felix Kling Mar 24 '14 at 04:04

1 Answers1

0

You cannot target pseudo elements with jQuery, instead you can add a class to the dd elements:

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

then set the style based on this class in your CSS:

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

Updated Fiddle

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

Felix
  • 37,892
  • 8
  • 43
  • 55