Why are leading spaces in the q element handled differently than other inline elements?

Question

It seems that the leading space inside the element is <q>always preserved (although it is normalized to one space), while this does not apply to most built-in elements. For example, the following code ( jsFiddle ):

<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q>  test</q> b <a href=#>  test</a> c
<br> a <q>test  </q> b <a href=#>test  </a> c
<br> a <q>  test  </q> b <a href=#>  test  </a> c

It is restored in all modern browsers that I tested (Chrome, FF and Edge):

The second and fourth lines are <q>displayed with the original spaces, but <a>not. Why is this?

EDIT: Adding the following CSS to the script above:

a::before, a::after {
   content: '"';
}

Makes their visualization the same. So something seems to be related to the CSS selector ::before.

Answer 1

Chrome docs HTML, <q> (quote):

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

, <a> (anchor), :

https://jsfiddle.net/b6p60Lwd/

, ::before ::after. MDN, , ( ::before) ( ::after) . , , <q>.

:

<br> a <span><span>"</span>    b</span>

b, :

<br> a <span>    b</span>

b.

:

https://jsfiddle.net/b6p60Lwd/1/

Answer 2

css, , , . , , .

, , , q. , , .

, CSS :

body {
    white-space: pre;
}

https://jsfiddle.net/zxvsehs6/

: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 3

- , <q> : . , . "" , , . , , , . <q> , , , , "" .

, , HTML . .