html - 如何使用 css 重新创建 tex 的 over-underbracket

Question

我需要在 HTML 中写下一些公式，并想描述这些值的来源。在 TeX 中，我会简单地使用 overbracket/underbracket 包(参见 https://tex.stackexchange.com/questions/132526/overbrace-with-square-bracket 的示例)。

是否有外观相似的“库”或任何您称之为仅使用 CSS 实现相同功能的东西？ (我只需要方括号就可以了)。

我自己尝试重新创建类似的外观，但在尝试显示支架时遇到了问题。

我尝试使用表格让描述显示在公式的上方或下方，但是公式的一部分将不再与公式的其余部分位于同一行。此外，使用边框我无法重新创建方括号，如链接中所示...

编辑:所以这应该可视化我遇到的问题:

CSS

table {
  display: inline-block;
}

html

<table>
  <tr><td>+1</td><tr>
  <tr><td>value #1</td><tr>
</table>
<table>
  <tr><td>value #2</td><tr>
  <tr><td>+1</td><tr>
</table>
= 10

https://jsfiddle.net/jcqjr8ge/

基本上，所有“+1”和“= 10”都应该在同一行，因为值的描述应该在值的上方或下方。

Answer 1

这很容易做到，因为您只需要一个方括号 ([)。我选择解决这个问题的方法是简单地使用一个伪 after 元素，显示它 block 以换行，并给除顶部以外的所有边都加上边框:

[data-bracket] {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
[data-bracket]:after {
  content: "";
  display: block;
  height: 6px;
  border: 2px solid black;
  border-top: none;
}
[data-bracket]:before {
  content: attr(data-bracket);
  position: absolute;
  top: 100%;
  font-size: 80%;
  padding: 5px;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%)
}

<p>Uber-cool math formula: <span data-bracket="Very hard math">2+2 = 1*4</span>
</p>

为了在其下方显示描述文本，我使用了 before 元素，从 data-bracket 属性中设置它的内容，并将其置于“括号”下方的中心。

JSFiddle for you to play with