Using window.getComputedStyle to style pseuso elements with css calc

Question

I have some elements on the page that have a pseudo-element whose height is written using the calc () CSS function; something like that:

.el:before: {
    content: "";
    height: calc(50% + 10px);
}

I want to use this method to get the height of an element :before, and in Webkit-based browsers it works and returns the pixel value.

var height = window.getComputedStyle(
    document.querySelector('.el'), ':before'
).getPropertyValue('height');

In Firefox, however, it returns the actual CSS rule string (for sure 'calc(50% + 10px)').

(function() {
  var height = window.getComputedStyle(
    document.querySelector('.myelem'), ':before'
  ).getPropertyValue('height');
  
	document.getElementById('result').innerHTML = 'Calculated height is: ' + height;
})();

.myelem {
  position: relative;
  padding-left: 20px;
}
.myelem:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1px;
  height: calc(50% + 2px);
  background-color: red;
}

<div>
  <div class="myelem">
    <span>Some stuff here</span>
  </div>
</div>

<div id="result">

</div>

Run codeHide result

Is there any work for this?

Answer 1

This is really a mistake

2013 , , , ++; -)

...