1451269 - CSS Pseudo-elements ::after or ::before don't display properly with display: inline parents

Status: RESOLVED DUPLICATE of bug 489100

(Core :: Layout: Positioned, defect)

Description

[Gledsley Müller]

Attachment: Screenshot of behaviour compared to expected behaviour

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Steps to reproduce:

I needed to add a 'border' after a span but the appropriate solution would be using either ::after or ::before pseudo-elements. If the container were to force the content to break a line, then the 'border' should be only on the width of the bottom line (that's why a `display: block` or `display: inline-block` weren't appropriate).

I created a jsbin to show the issue (easier to understand).

http://jsbin.com/mayexozeye/1/edit?html,css,output


Actual results:

The pseudo-element displays in the middle of the height (not respecting the full height of the parent `display: inline` element). 


Expected results:

It should have displayed the pseudo-element AFTER the last line of the content (`bottom: -10px` to be precise). This is a screenshot of the behaviour on Firefox and expected behaviour on Chrome:

https://cl.ly/2U2O3F2U2530