14

I need the height of a pseudo :before element. Sounds like a no-brainer, but I cannot get it to work. This is what I have tried:

$('.test:before').height() // --> null

And a jsfiddle Any suggestions what I do wrong ?

UPDATE: The height of .test depends on the content. What I need to do is, when the height gets bigger than the pseudo element, I need to add a padding to the right of the element. However, because the height of the pseudo element is set by css I don't know it in my program

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
  • 7
    Pseudo elements are not selectable by JQ as they are not in the DOM. **Why** do you need the height...have you not defined this already? – Paulie_D Apr 23 '14 at 15:17
  • @Paulie_D perhaps he's using CSS media selection and doesn't know which style rules are in force? – Alnitak Apr 23 '14 at 15:27
  • 5
    You should be able to use `window.getComputedStyle()` with pseudo-elements but I'm not sure of browser support. See http://jsfiddle.net/BoltClock/asCV9/1 – BoltClock Apr 23 '14 at 15:31
  • @BoltClock that's great. [This here](https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle#Browser_compatibility) shows browser support – jackfrankland Apr 23 '14 at 16:35
  • I've added an explanation why and what I'm trying todo! Thanks for the answers so far! – Jeanluca Scaljeri Apr 23 '14 at 17:00

3 Answers3

28

Super-late reply, but: you can use vanilla JavaScript to get pseudo-element dimensions using the getComputedStyle method:

var testBox = document.querySelector('.test');

// Or with jQuery: testBox = $('.test').get(0); - We want the JS element, without the jQuery wrapper

var pseudoBeforeHeight = window.getComputedStyle(testBox, ':before').height; // Returns (string) "70px"

This will return a string of the pixel value, regardless of the CSS declaration (e.g. 4.375rem = 70px, 10vh = 70px, calc(8vh + 1rem) = 70px, so to get the number (in pixels) you can just do:

var pseudoHeightNum = parseInt(pseudoBeforeHeight);

With regards to compatibility: CanIUse suggests that, as of July 2017 it works pretty much across the in all modern browsers (apparently even with support for IE9 and above): reference.

indextwo
  • 5,535
  • 5
  • 48
  • 63
  • @JeanlucaScaljeri It would be awesome to get an accept-tick on this one, even if it is a little late – indextwo Jan 27 '21 at 11:23
  • getComputedStyle gave me value "auto" :( which is not px – Dee Jul 29 '23 at 17:53
  • i know how to avoid "auto", add display:inline-block to the pseudo css; Ref: https://stackoverflow.com/a/20858630/5581893 – Dee Jul 29 '23 at 18:09
1

As Paulie_D said, "Pseudo elements are not selectable by jQuery".

However, if the elements on your site are styled in the same way as they are in the JSFiddle, then the div will end up being the same height as the :before, which you CAN get the value of:

$('.test').height()

If it isn't the same, then let us know why you wish to get the height, and there may be something else you can do.

jackfrankland
  • 2,052
  • 1
  • 13
  • 11
0

You can approach it somehow depending on your layout. If your pseudo element overflows the parent element then, the scrollWith/scrollHeight will give you the pseudo element dimensions since that properties return the overall size of the box's content, visible (scrollable) or not.

References:

Community
  • 1
  • 1
David
  • 623
  • 7
  • 16