how to recreate tex's over- underbracket using css

Question

I need to put some formulas down in HTML and want to give a description on where the values are coming from. In TeX I would simply use the overbracket/underbracket package (see https://tex.stackexchange.com/questions/132526/overbrace-with-square-bracket for an example).

Is there a similiar looking "library" or whatever you would call it that achieves the same using CSS only? (I'd be fine with only the square brackets).

I gave it an attempt myself to recreate something similar looking, but I ran into problems when trying to show the bracket.

F.e. I tried using a table to get the description to show up above or beneath the formula, but then part of the formula wouldn't be on the same line as the rest of the formula anymore. Also, using borders I couldn't recreate the square brackets as shown in the link...

edit: So this should visualize the problem I ran into:

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/

Basically, all the "+1s" and the "= 10" should be on the same line, where as the description for the values should be above or beneath the values.

Answer 1

This is really easy to do, since you just want a square ([) bracket. The method I chose to solve this was to simple use a pseudo after element, display it block to break to a new line, and give all sides but the top a border:

[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>

To display the description text under it, I used the before element, set it's content from the data-bracket attribute, and centered it under the "bracket".

JSFiddle for you to play with