CSSではQuotesを使用して引用符の記号をカスタマイズできます

引用符を付加できるCSSがあります

Quotesの使い方

content: open-quote;で開いて、content: close-quote; で閉じます。

quotes: values; で、引用符の記号を変更できます。

やってみましょう。

.quote::before {
  content: open-quote;
}
.quote::after {
  content: close-quote;
}
<p class="quote">Hello</p>

出来ましたね。引用符で囲まれています。

今度は、ネストしてみましょう。

<p class="quote">
 Hello<span class="quote">
 Hello<span class="quote">
 Hello<span class="quote">
 Hello</span></span></span>
</p>

一段目は、”「”、二段目以降は、”『” になりました。言語環境によって変わります。

記号を変更してみましょう。

.quotes-area {
    quotes: "«" "»" "‹" "›" "[" "]" "*" "*";
}

出来ましたね。quotes: “«” “»” ~~~ ; と、開閉セットで指定できます。

2段以上必要な文書をみたことありませんけどね。

containの領域の場合

contain: style; で、styleの封じ込めができます。

<span class="open-quote">
    1
    <span style="contain: style">
        <span class="open-quote">2</span>
        <span class="open-quote">3</span>
    </span>
</span>
<span class="close-quote">close.3</span>
<span class="close-quote">close.2</span>
<span class="close-quote">close.1</span>

Firefox は対応しています。chromeは未対応のようですね。2022.9