Get actual height of elements composited using :before and :after

Question

Is there a way to get the actual height in javascript (jquery is fine too) of an element that is drawn using :before and :after?

Checkout this fiddle: http://jsfiddle.net/a7rhdk86/

Thanks!

Answer 1

You can use window.getComputedStyle to access the styles of the :before pseudo-element. See http://davidwalsh.name/pseudo-element . However, this gets the css height and width of the element, not the bounding box after the rotation transform.

Getting into hacky territory, I borrowed code from http://upshots.org/javascript/jquery-copy-style-copycss , copied all the styles from the pseudo element to an actual element, added it to the DOM and used getBoundingClientRect to get the bounding box.

var style = window.getComputedStyle(
    document.querySelector(".arrow"), ":before"
    )

var dest = {}
if (style.length) {
     for (var i = 0, l = style.length; i < l; i++) {
         prop = style[i];
         camel = prop.replace(/\-([a-z])/, camelize);
         val = style.getPropertyValue(prop);
         dest[camel] = val;
     }
 } else {
     for (prop in style) {
         camel = prop.replace(/\-([a-z])/, camelize);
         val = style.getPropertyValue(prop) || style[prop];
         dest[camel] = val;
     }
 }

var copy = $("<div />").css(dest)
copy.appendTo(".arrow")
var boundingRect = copy[0].getBoundingClientRect()
console.log(boundingRect.height)
console.log(boundingRect.width)
copy.remove()

function camelize(a, b) {
    return b.toUpperCase();
}

See http://jsfiddle.net/omahlama/mybzymp7/1/