Tại sao dấu ngoặc kép chỉ hiển thị cho phần tử đầu tiên?

Tôi tự hỏi tại sao trình duyệt chỉ hiển thị dấu ngoặc kép mở cho phần tử đầu tiên. Thay vào đó, phần tử thứ hai có các dấu nháy đơn.

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

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

Các dấu ngoặc kép mở của bạn không được kết thúc, vì vậy trình duyệt đưa ra giả định "thông minh" rằng bạn sắp lồng các dấu ngoặc kép của mình, dẫn đến dấu ngoặc kép bên ngoài cho phần tử đầu tiên và dấu ngoặc kép bên trong cho phần tử thứ hai. Đây là cách hoạt động của dấu câu trong trích dẫn lồng nhau. Xem Wikipedia và các tham chiếu đến các trích dẫn lồng nhau trong đó.

Đáng chú ý, ranh giới phần tử bị bỏ qua, vì vậy không quan trọng ngay cả khi phần tử thứ hai của bạn được lồng sâu hơn hoặc nếu cả hai phần tử được lồng trong phần tử mẹ của chính chúng, thì nó vẫn hoạt động theo cùng một cách, điều này đặc biệt hữu ích trong các đoạn văn có thể chứa các loại và sự kết hợp của các yếu tố phân nhịp khác nhau ( a, br, code, em, span, strong, vv, cũng như qchính nó). Cách các dấu ngoặc kép được lồng vào nhau chỉ phụ thuộc vào số open-quotes và close-quotes đã được tạo tại bất kỳ thời điểm nào và thuật toán được trình bày chi tiết trong phần 12.3.2 của thông số kỹ thuật CSS2 , kết thúc bằng ghi chú sau:

Ghi chú. Độ sâu trích dẫn độc lập với việc lồng vào tài liệu nguồn hoặc cấu trúc định dạng.

Để đạt được điều đó, có hai cái được gọi là "giải pháp" cho vấn đề này, cả hai đều liên quan đến việc thêm một ::afterphần tử giả để cân bằng tập hợp các dấu ngoặc kép đầu tiên.

Bằng cách chèn dấu ngoặc kép bằng cách sử dụng dấu ngoặc ::afterkép cho phần tử đầu tiên được kết thúc trước khi phần tử thứ hai gặp phải nên không có sự lồng ghép các dấu ngoặc kép.

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>

Nếu bạn không thực sự muốn hiển thị dấu ngoặc kép, bạn vẫn có thể ngăn trình duyệt tạo dấu ngoặc kép cho phần tử thứ hai bằng cách sử dụng 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>

Điều này là do bạn đã không đóng các dấu ngoặc kép trước đó, các dấu ngoặc kép tiếp theo sẽ chỉ có một '.

vì vậy hãy sử dụng phần tử giả aftervớicontent: close-quote

Xem đoạn mã dưới đây:

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>

Bạn cũng có thể chỉnh sửa trích dẫn chính và phụ trên thẻ bằng cách sử dụng thuộc tính CSS trích dẫn như sau:

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

xem đoạn mã dưới đây:

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>