Css 在html中模拟latex\Underfrack（即在句子的特定部分下方编写文本）

我正在搜索以获得这种效果

也就是说，在一段文字下面放一个括号，然后在括号下面写文字。使用HTML和CSS有可能获得这样的效果吗？如果没有，也可以使用javascript

只需在所选文本中添加下边框即可获得“基本”括号，如

span.note { bottom-border: 1px solid }

The quick <span class=note>brown fox jumps over the</span> lazy dog.

并生成这个输出

---

新解决方案 有了这段代码，就可以将HTML代码放在所选文本的下面，这里就是一个例子

上面的

{
位置：相对位置；
显示：内联块；
边缘底部：1.5em；
}
.以上：：之前{
位置：绝对位置；
最高：90%；
高度：6px；
宽度：100%；
边框：1.5px currentcolor纯色；
边界顶部：0；
内容：“；
}
.上.下{
位置：绝对位置；
宽度：100%；
左：0；
最高：140%；
字体大小：0.75em；
文本对齐：居中；
}

---

产品2·2·2 23可以写成power。
您可以这样做，然后将div移动到您想要的任何位置


img{
变换：旋转（180度）；
高度：23px；
左边距：30px；
衬垫顶部：-20px；
}
p{
保证金：0；
左边距：40px；
}
.首先{
保证金：0；
}

一定数量的文本
某物

以下是带方括号的示例。如您所见，我使用了两个段落标记和一个div，它只显示右下角和左下角的边框


div#容器{
文本对齐：居中；
}
p{
保证金：0；
}
分区边界{
边框底部：1px纯黑；
右边框：1px纯黑；
左边框：1px纯黑；
宽度：143px；
高度：8px；
左边距：248px；
}

敏捷的棕色狐狸跳过了懒狗

如果我们去掉这个呢

您可以为注释的文本使用
数据-*
属性以及伪元素的
内容
属性，例如


p{font:1rem/1.4 Arial；}
[数据注释]{
位置：相对位置；
空白：nowrap；
显示：内联块；
边缘底部：2米；
光标：指针；
}
[数据注释]：：之前，
[数据注释]：：之后{
位置：绝对位置；
z指数：1；
宽度：100%；
不透明度：.5；
过渡：不透明度.5s 0s，颜色.5s 0s；
}
[数据注释]：：之前{
顶部：计算值（100%+2倍）；
高度：5px；
边框：1px currentcolor纯色；
边界顶部：0；
内容：“；
}
[数据注释]：：之后{
内容：attr（数据注释）；
左：0；
字体大小：.75em；
文本对齐：居中；
顶部：计算（100%+10px）；
溢出：隐藏；
文本溢出：省略号；
}
[数据注释]：悬停：：在，
[数据注释]：悬停：：之后{
不透明度：1；
颜色：#578；
}
[数据注释]：悬停：：之后{
溢出：可见；
}

敏捷的棕色狐狸跳跃
为了那只懒狗。第二天晚上，我坐在床上
再见，敏捷的棕色狐狸跳过懒惰的狐狸。乱数假文
多洛·艾米特先生
敏捷的棕色狐狸跳了过去
懒惰的人。这是一个伟大的事业，
敏捷的棕色狐狸跳过了懒狗。
作为一种替代方法，根据我的评论，您可以尝试更简单的tac


快速棕色
狐狸跳过了懒洋洋的树
狗。


…还有CSS

span.syntax-hilite{
边界半径：0 0 5px 5px；
边框底部：1px纯红；
}
方括号可以用作具有左右底部边框的
div
。我不知道曲线括号。如果其他方法都失败了，SVG会起作用。@pensum是的，但如何将文本置于边框下方？@ThanhTrung是否可以将气泡锚定到文本上？@soundwave SVG是一种在web上使用矢量图形的方法。您可以创建一个类似于括号的路径。SVG也支持文本。SVG使用XML标记，类似于HTML标记。缺点是定位可能很困难，但你可以让它工作，即使你要通过JavaScript将SVG与HTML和定位混合在一起。我很欣赏你的尝试，但这样一来，括号就不会随着字体大小而缩放，对于所选文本的每一段长度，必须生成不同大小的括号图像。非常感谢！您认为可以根据感兴趣的文本的宽度自动设置边框宽度吗？我不这么认为，因为您的
div
宽度独立于顶部的段落。那么他怎么会知道感兴趣的文本呢^^当然，您可以使用javascript/jquery来实现这一点，尽管您确实说过只有HTMLCSS，开发人员必须自己选择这些内容的宽度。没有规则..@123abc321bca使用javascript难吗？哇，这太棒了！它有自动大小的括号，并没有javascript，易于实现，都在一个单一的跨度。我要测试一下，谢谢@fcalderan我在很多情况下都在测试你的代码，直到现在它还是很有魅力的，谢谢！我正在阅读
z-index
属性，发现它指定了元素的堆栈顺序。我试着删除它，代码仍然像以前一样工作，但是你建议我还是把它留在代码中吗？谢谢大家!@声波通常我想知道堆栈顺序，我更喜欢总是声明它。@fcalderan好的，谢谢！我尝试在
数据注释
中放入一些html，例如
某物
，但在注释中显示的是
23
，而不是2，顶部是小3。是否有方法处理提供给
数据注释的html代码？再次感谢您不，伪元素的
content
属性不能呈现html。无论如何，对于基本上标，使用UTF-8符号（看看unicode t）
\documentclass{article}
\usepackage{mathtools}
\begin{document}
$\underbrace{a+b+c}_{d} \quad \underbracket{a+b+c}_{d}$
\end{document}