(interpretuje Internet Explorer 8.0, Firefox, Opera)

W języku HTML istnieją specjalne znaczniki, przeznaczone do oznaczania cytatów: <q>...</q> (krótki cytat), <blockquote>...</blockquote> (blok cytowany). Jak mówi specyfikacja HTML 4.01, cytatów wstawianych w elementach q nie należy obejmować cudzysłowami, gdyż powinna zrobić to przeglądarka. Ponadto, ponieważ w różnych językach (mówionych) używa się różnych znaków cudzysłowu, przeglądarki powinny wygenerować takie, które odpowiadają aktualnemu językowi treści. Od języka zależą również znaki cudzysłowów w cytatach zagnieżdżonych, czyli gdy jeden cytat znajduje się wewnątrz innego. Niestety problem w tym, że przeglądarki zwykle sobie z tym nie radzą 🙁

Między innymi z tego powodu specyfikacja CSS 2 umożliwia jawne określenie znaków cudzysłowu i to dla wielu języków jednocześnie. Robi się to dwustopniowo:

1. Najpierw ustalamy jakie znaki mają być wyświetlone w miejscu automatycznie generowanych cudzysłowów:

   q { quotes: '"' '"' "'" "'" }

   Pierwsza para odpowiada normalnym cytatom, a druga - cytatom zagnieżdżonym. Można tutaj podać więcej takich par - dla głębszych poziomów zagnieżdżenia. Jeżeli w kodzie HTML wystąpi cytat zagnieżdżony o większą liczbę poziomów niż podano, to zostanie dla niego użyta ostatnia z wymienionych par znaków cudzysłowu.

2. Następnie za pomocą pseudoelementów przed... oraz po... wstawiamy wcześniej zadeklarowane znaki cudzysłowu w odpowiednich miejscach cytatu:

   q:before { content: open-quote }
   q:after { content: close-quote }

UWAGA! Nie obsługuje Chrome 4 ani MSIE 7.0! W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

Źródło: Cascading Style Sheets, Level 2

Cytaty w języku polskim można oznaczać następująco:

q:lang(pl) { quotes: "\201E" "\201D" "\00BB" "\00AB" }
q:before { content: open-quote }
q:after { content: close-quote }

q:lang(pl) { quotes: "\201E" "\201D" "\201A" "\2019" }
q:before { content: open-quote }
q:after { content: close-quote }

Ponadto istnieją dwie dodatkowe wartości, które można przypisać do własności content zamiast open-quote i close-quote. Są to: no-open-quote i no-close-quote. Różnią się one w działaniu tym, że normalnie zwiekszają/zmniejszają poziom zagnieżdżenia cytatów, jednak nic nie wyświetlają. Czasami może to być przydatne w przypadku bloków cytowanych, gdzie zdarza się konieczność postawienia na początku każdego akapitu w takim bloku znaku otwarcia cudzysłowu, ale zamknięcie tylko po ostatnim z nich:

blockquote p { quotes: "\201E" "\201D" }
blockquote p:before  { content: open-quote }
blockquote p:after { content: no-close-quote }
blockquote p.last:after { content: close-quote }