Cách sử dụng quotes - Quản lý dấu ngoặc kép trong văn bản

Trong CSS, việc sử dụng dấu ngoặc kép (quotes) có thể được quản lý chủ yếu qua thuộc tính content khi bạn làm việc với pseudo-elements như ::before hoặc ::after. Ngoài ra, thuộc tính quotes được sử dụng để xác định kiểu dáng của dấu ngoặc kép cho các nội dung trong các phần tử văn bản, đặc biệt là trong các đoạn trích dẫn (<q>).

Dưới đây là hướng dẫn về cách sử dụng và quản lý dấu ngoặc kép trong CSS:

1. Sử dụng thuộc tính quotes

Thuộc tính quotes được dùng để xác định các dấu ngoặc kép mở và đóng cho các đoạn trích dẫn (<q>).

Cú pháp:

Trong CSS, việc sử dụng dấu ngoặc kép (quotes) có thể được quản lý chủ yếu qua thuộc tính content khi bạn làm việc với pseudo-elements như ::before hoặc ::after. Ngoài ra, thuộc tính quotes được sử dụng để xác định kiểu dáng của dấu ngoặc kép cho các nội dung trong các phần tử văn bản, đặc biệt là trong các đoạn trích dẫn (<q>).

Dưới đây là hướng dẫn về cách sử dụng và quản lý dấu ngoặc kép trong CSS:

1. Sử dụng thuộc tính quotes

Thuộc tính quotes được dùng để xác định các dấu ngoặc kép mở và đóng cho các đoạn trích dẫn (<q>).

Cú pháp:

selector {
  quotes: "dấu ngoặc kép mở" "dấu ngoặc kép đóng" "dấu ngoặc kép mở cấp hai" "dấu ngoặc kép đóng cấp hai";
}

Ví dụ:

q {
  quotes: "“" "”" "‘" "’";
}

Trong ví dụ này:

• Dấu ngoặc kép mở ở cấp 1 là “
• Dấu ngoặc kép đóng ở cấp 1 là ”
• Dấu ngoặc kép mở ở cấp 2 là ‘
• Dấu ngoặc kép đóng ở cấp 2 là ’

2. Sử dụng thuộc tính content với pseudo-elements

Bạn có thể sử dụng thuộc tính content để chèn dấu ngoặc kép vào trước hoặc sau nội dung của một phần tử. Thường được sử dụng với các pseudo-elements như ::before và ::after.

Cú pháp:

selector::before {
  content: "dấu ngoặc kép mở";
}

selector::after {
  content: "dấu ngoặc kép đóng";
}

Ví dụ:

blockquote::before {
  content: "“";
}

blockquote::after {
  content: "”";
}

<style>
  q {
    quotes: "«" "»" "‹" "›";
  }
</style>

<q>Câu nói được trích dẫn.</q>
<q><q>Câu nói được trích dẫn trong câu khác.</q></q>

«Câu nói được trích dẫn.»
«‹Câu nói được trích dẫn trong câu khác.›»

q {
  quotes: none;
}