Можно ли добавить встроенные кавычки к цитате, содержащей несколько абзацев, используя теги <p>?

Question

У меня есть blockquote, который содержит несколько тегов <p>, и я пытаюсь заключить весь текст в кавычки. Мне нужно, чтобы эти кавычки автоматически добавлялись непосредственно рядом с текстом (встроенный), а также мне необходимо, чтобы элементы <p> отображались в виде отдельных абзацев и чтобы не объединялось в один текстовый блок.

ПРИМЕЧАНИЕ: отмеченный возможный дубликат НЕ . Это стилистический подход. Мне нужно, чтобы кавычки отображались как содержимое внутри blockquote.

Это, казалось бы, упрощенная проблема, которая поставила меня в тупик.

Что я пробовал:

Отображение inline для начального тега <p>.

Позиционировать открывающую цитату вручную.

Отобразите оба тега <p> в строке (что решит проблему), потому что они затем будут встроены друг в друга, создавая гигантский блок текста.

Я мог бы добавить разрыв после открывающего тега <p>, используя javascript, но это не было бы идеально. Я предполагаю, что мог бы также объединить кавычки, используя js, но я не проверял это, и я предпочел бы вообще не использовать JS.

Пример вывода

<blockquote>
<p>Some text</p>
<p>Some other text</p>
</blockquote>

Что мне нужно

"Это был великий день, потому что солнечно.

Позвольте мне рассказать вам, почему солнце удивительное "

Что я получу

"

Это был великий день, потому что солнечно.

Позвольте мне рассказать вам, почему солнце удивительное

"

Answer 1

Вы можете сделать это с помощью display: table-row / display: table-cell

blockquote:before,
blockquote:after {
  display: table-cell;
  content: "\0022";
  font-size: 4rem;
  vertical-align: middle;
  padding: 0 1rem;
}

blockquote:before {
  content: '\201C';
}

blockquote:after {
  content: '\201D';
}

blockquote {
  display: table-row;
  text-align: center;
  width: 100%;
}

<blockquote>
  <p>You know you’re in love when you can’t fall asleep because reality is finally better than your dreams.</p>
  <p>Bottom text</p>
</blockquote>

---

Или с display: grid

blockquote:before,
blockquote:after {
  font-size: 6rem;
  grid-row: 1;
}

blockquote:before {
  content: '\201C';
  grid-column: 1 / 2;
}

blockquote:after {
  content: '\201D';
  grid-column: 3 / 4;
}

blockquote {
  display: grid;
  grid-template-columns: auto auto auto;
  text-align: center;
}

p {
  grid-column: 2 / 3;
}

<blockquote>
  <p>You know you’re in love when you can’t fall asleep because reality is finally better than your dreams.</p>
  <p>Bottom text</p>
</blockquote>

Answer 2

Вот некоторые CSS, которые, я думаю, получают то, что вы ищете:

blockquote>p:first-child:before {
  content: "\"";
}

blockquote>p:last-child:after {
  content: "\"";
}

<blockquote>
  <p>Some text</p>
  <p>Some other text</p>
</blockquote>