在句子的特定部分下面写正文

时间：2019-11-25 作者：sound wave

我正在寻找获得这种效果

enter image description here

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

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

The quick <span style="bottom-border: 1px solid">brown fox jumps over the</span> lazy dog.

但如何在边框下方添加文本？

2 个回复
最合适的回答,由SO网友:sound wave 整理而成

这段代码完成了这项工作，此外，还可以将HTML代码放在所选文本下面，这里是一个示例

.above {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5em;
  }
  .above::before {
    position: absolute;
    top: 90%;
    height: 6px;
    width: 100%;
    border: 1.5px currentcolor solid;
    border-top: 0;
    content: "";
  }
  .above .below {
    position: absolute;
    width: 100%;
    left: 0;
    top: 140%;
    font-size: 0.75em;
    text-align: center;
  }

<p>The product <span class="above">2 · 2 · 2 <span class="below">2<sup>3</sup></span></span> can be written as power.</p>

enter image description here

SO网友:Vincent

也许您可以用Javascript找到跨度的x/y位置，并用增加的y位置定位另一个div？我认为这个问题不会有现成的css解决方案。

下面是一个快速示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        p {font-size: 16px}
        .underline {text-decoration: underline}
        .below_underline {position: absolute; font-weight: bold; font-size: 12px; display: inline-block; text-align: center}
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){       
        $(\'.underline\').each(function(){
            var position = $(this).position();
            var newElement = \'<span class="below_underline">what if we remove this?</span>\';
            $(newElement).css(\'left\', position.left).css(\'top\', position.top + 20).css(\'width\', $(this).width() ).appendTo(this);
        });
    }); 
    </script>
</head>
<body>
<p>The quick <span class="underline">brown fox jumps over the</span> lazy dog.
</body>
</html>
它有一些缺陷，比如如果文本不适合一行等等，但这应该给你一个好的开始。

标签： css   javascript   html   小码农  

相关推荐

CSS Styling a specific page

我熟悉通过添加类在WordPress上设置特定页面的样式.page-id-123 在样式化元素前面。然而，这似乎不适用于“子页面”（抱歉，不知道它们叫什么），当页面后面有一个特定的标记（？）已添加。示例：URL:wordpressweb。com/我的帐户CSS：.page-id-123 .header { background-color: yellow; }URL:wordpressweb。com/我的帐户/?add-new-business=trueCSS：??? .header { bac