在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

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

​

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>

​