如何使用CSS重新创建tex的过括号

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元素，将其显示为断点以换行，并给除顶部以外的所有侧面加上边框：

[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让您玩