Why are double quotes shown only for the first element?

  • A+
Category:Languages

I am wondering why the browser shows double open quotes only for the first element. The second element has single quotes instead.

a::before {   content: open-quote; }
<a href="http://www.google.com">Google</a> <br> <a href="http://www.amazon.com">Amazon</a>


Your open quotes are not terminated, so the browser does the "smart" thing by inserting double outer quotes and single inner quotes. This is how quote punctuation works in nested quotations. See Wikipedia and the references to nested quotations therein.

Notably, element boundaries are ignored, so it doesn't matter even if your second a element is nested deeper or if both a elements are nested in their own parent elements, it will still work the same way. How quotes are nested depends solely on the number of open-quotes and close-quotes that have been generated at any point in time, and the algorithm is detailed in section 12.3.2 of the CSS2 spec, ending with the following note:

Note. The quoting depth is independent of the nesting of the source document or the formatting structure.

To that end, there are two so-called "solutions" to this problem, both of which involve adding an ::after pseudo-element to balance out the first set of open quotes.

By inserting close quotes using ::after the quotations for each a element are terminated so there is no nesting of quotations.

a::before {   content: open-quote; }  a::after {   content: close-quote; }
<a href="http://www.google.com">Google</a> <br> <a href="http://www.amazon.com">Amazon</a>

If you don't actually want to render close quotes, you can still prevent the browser from generating single quotes for the second element using no-close-quote.

a::before {   content: open-quote; }  a::after {   content: no-close-quote; }
<a href="http://www.google.com">Google</a> <br> <a href="http://www.amazon.com">Amazon</a>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: