Мне интересно, почему браузер показывает двойные открытые кавычки только для первого элемента. Вместо этого второй элемент заключен в одинарные кавычки.
a::before {
content: open-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>
html
css
pseudo-element
css-content
Паван Тивари
источник
источник
open-quote
это открыть цитату. Это не относится к символу двойной кавычки.Ответы:
Ваши открытые кавычки не прерываются, поэтому браузер делает «умное» предположение, что вы собираетесь вложить свои кавычки, что приводит к двойным внешним кавычкам для первого элемента и одинарным внутренним кавычкам для второго. Вот как знаки препинания работают во вложенных цитатах. См. Википедию и ссылки на вложенные цитаты в ней.
Примечательно, что границы элементов игнорируются, поэтому не имеет значения, даже если ваш второй элемент вложен глубже или оба элемента вложены в свои собственные родительские элементы, он все равно будет работать таким же образом, что делает его особенно полезным в абзацах, которые могут содержат различные виды и комбинацию элементов фразировки (
a
,br
,code
,em
,span
,strong
, и т.д., а такжеq
сам по себе). Как вложены кавычки, зависит исключительно от количестваopen-quote
s иclose-quote
s, которые были сгенерированы в любой момент времени, и алгоритм подробно описан в разделе 12.3.2 спецификации CSS2 , который заканчивается следующим примечанием:С этой целью есть два так называемых «решения» этой проблемы, оба из которых включают добавление
::after
псевдоэлемента для уравновешивания первого набора открытых котировок.Вставка закрывающих кавычек с использованием
::after
цитаты для первого элемента завершается до того, как встретится второй элемент, поэтому вложения цитат не происходит.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
.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>
источник
Это потому, что вы не закрыли предыдущие котировки, следующие котировки останутся только с одним
'
.поэтому используйте псевдоэлемент
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>
Вы также можете редактировать первичные и вторичные кавычки в теге, используя свойство 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>
источник