1560244 - Span with :before content pushed to new line even when enough space

Status: NEW

(Core :: Layout, defect, P3)

Description

[A. Monteith]

Attachment: Firefox Layout Bug.zip

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

Loaded page (see simplified version FirefoxLayoutBug.html in attached zip file) which contains:

.required-mark:before, .required_mark:before {
content: "*";
color: red;
padding: 0px 0px 0px 4px;
font-size: 1.4em;
font-weight: bold;
margin-right: -6px;
line-height: 0.75em;
}

Then the required_mark is here:

	<div><label for="txtField1">Field 1</label>
		<input type="text" id="txtField1" ><span class="required_mark"></span>
	</div>

Actual results:

The required_mark appears on a new line, not next to/to the right of the input. However, when I r-click on the page and select "Inspect element" then the layout corrects itself.
I have screenshots of before and after this in the attached .zip file.

Expected results:

The required_mark (an asterix) should appear to the right of the input. It does in Chrome and Edge, but only in Firefox Quantum after clicking on "Inspect element".

Comment 1

[BugBot [:suhaib / :marco]]

The priority flag is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit auto_nag documentation.