将:: before和:: after与多个段落一起用于“证明”环境

Question

假设我想在HTML / CSS中实现一个 Proof 环境，就像您在数学写作中经常看到的那样。这是我在LaTeX中排版的例子。

主要功能是第一段以单词“ Proof ”开头，最后一段以右对齐的正方形（墓碑）结尾。您如何编写CSS在网页上实现此功能？为此，我编写CSS的最佳尝试是：

p.proof {display: block;}
p.proof::before {content: "Proof. \00A0"; font-style: italic;}
p.proof::after {content: "\2610"; float:right;}

但这仅在证明是单个段落且都在单个<p class="proof">...<\p>中的情况下才有效，并且不适用于以上示例。我真的想避免必须在HTML中手动指定证明的第一和最后一段。所以理想情况下，我希望HTML看起来像

<div class="proof">
  <p>This paragraph will have an italic "Proof" before it.</p>
  <p>Whereas this paragraph will have a square after it.</p>
</div>

Answer 1

无论孩子有多少，使用:first-child和:last-child都能做到

.proof p:first-child:before{
    content: "Proof. \00A0"; font-style: italic;
}

.proof p:last-child:after{
    content: "\2610"; float:right;
}

<div class="proof">
  <p>This paragraph will have an italic "Proof" before it.</p>
  <p>Whereas this paragraph will have a square after it.</p>
</div>

<div class="proof">
  <p>This paragraph will have an italic "Proof" before it and box after.</p>
</div>

Answer 2

使用“理想”标记，您可以依靠:first-child和:last-child：

.proof {display: block;}
.proof p:first-child::before {content: "Proof. \00A0"; font-style: italic;}
.proof p:last-child::after {content: "\2610"; float:right;}

<div class="proof">
  <p>This paragraph will have an italic "Proof" before it.</p>
  <p>Whereas this paragraph will have a square after it.</p>
</div>