How do you find coordinates of pseudo elements?

Question

I have been searching the answer to this question but haven't been able to find a valid one. Let's take the following web site as an example: https://www.atlassian.com/devops

There's a pseudo element before the following element:

var e = document.querySelector('li[class=language-selector]');
e.getClientRects();
top:    9797
bottom: 9818
left:   78
right:  162
x:      78
y:      9797
width:  85
height: 21

The function window.getComputedStyle returns some values for top, bottom, left and etc:

window.getComputedStyle(e, ':before').top;      //10.5      
window.getComputedStyle(e, ':before').bottom;   //-9.5      
window.getComputedStyle(e, ':before').left;     //-26       
window.getComputedStyle(e, ':before').right;    //90.6      
window.getComputedStyle(e, ':before').x;        //0
window.getComputedStyle(e, ':before').y;        //0
window.getComputedStyle(e, ':before').width;    //20
window.getComputedStyle(e, ':before').height;   //20

At first it seems to be relative values to the base element, but if I check the other element from the same page, the behavior seems inconsistent:

var e3=document.querySelectorAll('blockquote[class="cite large-quote"]')[0];
top:    2303
bottom: 2408
left:   78
right:  1038
x:      78
y:      2303
width:  960
height: 105

The function window.getComputedStyle returns the followings:

window.getComputedStyle(e3, ':before').top;     //-25
window.getComputedStyle(e3, ':before').bottom;  //-50
window.getComputedStyle(e3, ':before').left;    //0
window.getComputedStyle(e3, ':before').right;   //889.25
window.getComputedStyle(e3, ':before').x;       //0
window.getComputedStyle(e3, ':before').y;       //0
window.getComputedStyle(e3, ':before').width;   //70.75
window.getComputedStyle(e3, ':before').height;  //180

For example, the top and bottom of the first pseudo element are 10.5 and -9.5 and (10.5) - (-9.5) is the height of the pseudo element (20).

The top and bottom of the second pseudo element are -25 and -50 but the height of the pseudo element is 180. They are both having "absolute" in their "position" attribute. So the behavior is inconsistent.

It'll be greatly appreciated if someone can shed some lights on how to obtain the position or coordinates of pseudo elements.

Answer 1

The css property bottom is not the same as a bounding rectangle's bottom property. The fact that the top and bottom css values end up being the height of the pseudo element in the first test is just coincidence.

The bounding rectangle bottom is calculated based on its y position and its height:

https://drafts.fxtf.org/geometry/#dom-domrectreadonly-domrect-bottom

The bottom attribute, on getting, must return max(y coordinate, y coordinate + height dimension).

The css bottom property however is a position value. With an absolute positioned element:

https://www.w3.org/TR/CSS2/visuren.html#propdef-bottom

Like 'top', but specifies how far a box's bottom margin edge is offset above the bottom of the box's containing block.

So you can't simply use the formula bottom-top to get the pseudo element's height. You have to take the closest positioned container element's height into account, in your case the blockquote.

So for the blockquote element: Its height is 105px. The top of the quote is 25px above the top, and its bottom is 50px below the bottom. With those values you get the pseudo element's height:

105 - -25 - -50 = 180

As for the coordinates: the x,y properties seem to be browser specific as they do not exist in Firefox, IE, etc. And I cannot find out what they are exactly supposed to hold. Also the ones on the bounding box are simply the left,top values.

So if you want to calculate the left, top values you would have to use its left, top values and take again into account the closest positioned parent's location

var rect = e.getClientRects();
var pseudoStyle = window.getComputedStyle(e, ':before');

//find the elements location in the page
//taking into account page scrolling
var top = rect.top + win.pageYOffset - document.documentElement.clientTop;
var left = rect.left + win.pageXOffset - document.documentElement.clientLeft;

//modify those with the pseudo element's to get its location
top += parseInt(pseudoStyle.top,10);
left += parseInt(pseudoStyle.left,10);