在 HTML/CSS 中实现“命名定理”环境

Question

在数学文档中，您经常会看到历史上重要的或命名的定理与文档中的其他定理不同。

现在我已经实现了编号定理：

body {
  counter-reset: theorem;
}
p.theorem {
  display: block; 
}
p.theorem::before {
  counter-increment: theorem; 
  content: "Theorem " counter(theorem) " \2014 "; 
}

所以上面的内容几乎可以通过以下方式创建：

<p class="theorem">
  This is your typical theorem, probably proved by the author of 
  the current paper, and doesn't need any special decoration.
</p> 
<p class="theorem">
  This theorem is important enough to warrant attribution to its author and a 
  reference to the entry in the bibliography where the author proves this theorem.
</p> 

但是如何在网页上实现定理的命名/归属呢？天真地必须将一些参数 name 传递给您用于定理的标签，但我认为仅使用 HTML/CSS 是不可能的。如果这是可能的，如果name 也可以是一个超链接，以链接到引用的作品，那就太好了。

另请参阅有关 referencing theorems like you can do with LaTeX 的相关问题。

Answer 1

您可以使用 attr() 从 CSS content 属性中引用元素属性的内容

body {
  counter-reset: theorem;
}
p.theorem::before {
  counter-increment: theorem; 
  content: "Theorem " counter(theorem) " \2014 "; 
}
p.theorem[data-attribution]::before {
  content: "Theorem " counter(theorem) " (" attr(data-attribution) ")  \2014 ";
}

<p class="theorem">This is your typical theorem, probably proved by the author of the current paper, and doesn't need any special decoration.</p>
<p class="theorem" data-attribution="Noether">This theorem is important enough to warrant attribution to its author and a reference to the entry in the bibliography where the author proves this theorem.</p>

这里有一篇很好的文章：https://davidwalsh.name/css-content-attr

但是，如果不添加一些 javascript，您将无法使其成为可访问的链接。在这一点上，可能值得一开始就使用语义 HTML 来标记内容——这必然更易于访问——使用如下模式：

.theorem {
    margin: 0 0 1em 0;
}
.theorem figcaption::after {
    content: " \2014 "
}
.theorem figcaption,
.theorem p {
    display: inline;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<figure class="theorem">
    <figcaption>Theorem 1</figcaption>
    <p>This is your typical theorem, probably proved by the author of the current paper, and doesn't need any special decoration.</p>
</figure>
<figure class="theorem">
    <figcaption>Theorem 2 (Noether [<a href="#">1</a>])</figcaption>
    <p>This theorem is important enough to warrant attribution to its author and a reference to the entry in the bibliography where the author proves this theorem.</p>
</figure>