How do browsers decide where selected text is?

Question

How do web browsers decide which part of the screen to show as "highlighted" when you select a bit of text? It always seems a bit unpredictable and buggy. For example, on this website, if I select a paragraph, it looks like this:

The highlighted section clearly goes out of bounds of its parent element and leaks out onto the links on the right. Why is that how the browser chooses to highlight the text? I know for sure that the browser (Chrome, in this case) is aware of where the element containing that text actually is, which can clearly be seen from the development tools:

Why, then, are we presented with the wrong "highlight"? How does this work under the hood?