web-dev-qa-db-ja.com

最初の要素にのみ二重引用符が表示されるのはなぜですか？

ブラウザーが最初の要素に対してのみ二重引用符を表示する理由を疑問に思っています。代わりに、2番目の要素には単一引用符があります。

a::before {
  content: open-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.Amazon.com">Amazon</a>
htmlcsspseudo-elementcss-content
88
Pavan Tiwari

開いた引用符は終了しないため、ブラウザーは引用符をネストしようとしているという「スマート」な仮定を行い、最初の要素には二重の外部引用符、2番目の要素には単一の内部引用符を作成します。これは、ネストされた引用において引用句読点がどのように機能するかです。 Wikipedia およびネストされた引用への参照を参照してください。

特に、要素の境界は無視されるので、2番目の要素がより深くネストされていても、両方の要素がそれぞれの親要素にネストされていても問題はありません。さまざまな種類とフレージング要素の組み合わせ（a、br、code、em、span、strongなど、およびq自体）。引用符のネスト方法は、任意の時点で生成されたopen-quotesおよびclose-quotesの数のみに依存し、アルゴリズムは セクション12.3.2で詳しく説明されています。 CSS2仕様 、次の注で終わる：

注：引用の深さは、ソースドキュメントまたはフォーマット構造のネストに依存しません。

そのために、この問題には2つのいわゆる「解決策」があります。どちらも::after擬似要素を追加して、最初のオープンクォートのバランスを取ります。

::afterを使用して閉じ引用符を挿入すると、最初の要素の引用は2番目の要素が見つかる前に終了するため、引用のネストはありません。

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>

実際に近い引用符を表示したくない場合でも、no-close-quoteを使用して、ブラウザーが2番目の要素に対して単一引用符を生成しないようにすることができます。

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>
135
BoltClock

これは、前の引用符を閉じなかったため、次の引用符は'が1つだけ残っているためです。

擬似要素afterとcontent: close-quoteを使用します

以下のスニペットを参照してください。

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>

次のように quotes CSSプロパティを使用して、タグのプライマリ引用符とセカンダリ引用符を編集することもできます。

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

以下のスニペットを参照してください。

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>
34
Springer F