title: How do you find coordinates of pseudo elements?
body: <p>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:
  <a href="https://www.atlassian.com/devops" rel="noreferrer">https://www.atlassian.com/devops</a></p>
  
  <p>There's a pseudo element before the following element:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>The function window.getComputedStyle returns some values for top, bottom, left and etc:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>The function window.getComputedStyle returns the followings:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>It'll be greatly appreciated if someone can shed some lights on how to obtain the position or coordinates of pseudo elements.</p>