Why are double quotes shown only for the first element?

Question

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>

Irvinirvine

open-quote does open a quotation. It doesn't refer to a double-quote character. – Antalkali

In Internet Explorer 11, they're both double open quotes. – Perea

Answer 1

Your open quotes are not terminated, so the browser makes the "smart" assumption that you're about to nest your quotes, resulting in double outer quotes for the first element and single inner quotes for the second. 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 element is nested deeper or if both elements are nested in their own parent elements, it will still work the same way, which makes it particularly useful in paragraphs that may contain different kinds and combinations of phrasing elements (a, br, code, em, span, strong, etc, as well as q itself). 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 quotation for the first element is terminated before the second element is encountered 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>

Duce

Answer 2

This is because you didn't close the previous quotes, the next quotes will remain only with one ' .

so use the pseudo element after with content: close-quote

See below snippet:

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>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

You can also edit the primary and secondary quotes on a tag by using quotes CSS property as follows:

a {
  quotes: "“" "”" "“" "”";
           ^   ^   ^   ^
           |   |   |   |
           |   |   |   |_ #secondary close quotes 
           |   |   |_____ #secondary open quotes 
           |   |_________ #primary close quotes    
           |_____________ #primary open quotes 
 }

see below snippet:

a {
  quotes: "“" "”" "“" "”";
}

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

<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Assay