wie man den Über-Unterboden von tex mit CSS wieder herstellt

Question

Ich muss einige Formeln in HTML ablegen und eine Beschreibung geben, woher die Werte kommen. In TeX würde ich einfach das Overbracket/Underbracket-Paket verwenden (siehe https://tex.stackexchange.com/questions/132526/overbrace-with-square-bracket für ein Beispiel).

Gibt es eine ähnlich aussehende "Bibliothek" oder wie auch immer man es nennen würde, die das selbe nur mit CSS erreicht? (Ich wäre nur mit den eckigen Klammern in Ordnung).

Ich habe versucht, etwas Ähnliches nachzubauen, aber ich habe Probleme beim Versuch, die Klammer zu zeigen.

F.e. Ich habe versucht, eine Tabelle zu verwenden, um zu erreichen, dass die Beschreibung über oder unter der Formel angezeigt wird, aber dann wäre ein Teil der Formel nicht mehr in derselben Zeile wie der Rest der Formel. mit Grenzen Außerdem konnte ich die eckigen Klammern nicht neu, wie in dem Link gezeigt ...

edit: So sollte das Problem, das ich in lief visualisieren:

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/

Grundsätzlich sind alle "+ 1" en und die "= 10" sollte in derselben Zeile stehen, wobei die Beschreibung für die Werte über oder unter den Werten liegen sollte.

Answer 1

Dies ist wirklich einfach zu tun, da Sie nur eine quadratische() Klammer wollen. Die Methode, die ich wählte dieses einfache Verwendung ein after Element Pseudo war zu lösen, zeigen Sie es in eine neue Zeile zu brechen zu blockieren, und geben allen Seiten, aber die oben eine Grenze:

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

zu zeige den Beschreibungstext darunter an, habe das before Element verwendet, seinen Inhalt aus dem data-bracket Attribut gesetzt und es unter der "Klammer" zentriert.

JSFiddle for you to play with