Html 标题旁边的响应行

我想在标题旁边写一条回复线

上面的图片来自pdf，而不是网站

---

我尝试使用底部有边框的Div，但它不合适，因为它是一个边框，它位于较低的位置，然后我尝试使用

我建议使用伪元素的不同方法

以下是您的HTML代码：

<div class="container">
        <div class="we-are">
            <div class="row">
                <div class="parent">
                    <h2>We are.</h2>
                </div>
            </div>
        </div>
 </div>

如果您想使线条垂直对齐，只需相应地更改CSS（删除底部并添加顶部）：

这是一个有效的实时代码笔：
当字体或屏幕发生变化时，您应该使用类似动态的东西，您必须先将行设置为句点符号，然后即使您增加/减少不应更改行的字体

你可以试试这样的。你可以尝试改变字体，你会看到线条粘在同一个位置，你只需要根据字体增加线条的高度



*{
填充：0；
保证金：0；
边界：0；
}
.集装箱{
保证金：5px；
边框：1px纯红；
}
.家长{
位置：相对位置；
宽度：自动；
显示：内联块；
字体大小：3em；/*更改大小并查看差异*/
}
.家长：之后{
内容：“；
位置：绝对位置；
底部：20%；
左：计算（100%+20px）；
宽度：500px；
/*无论字体如何，高度是唯一需要更改的内容*/
高度：5px；
背景：#BFE2CA；
}

我们是。
我只需要为每个屏幕大小设置宽度，对吗？但这是可以的。潜在的工作，将给它一个尝试，并返回到u@Azurry你可以做一些非常灵活的东西，比如：宽度：calc（100vw-200px）；让我知道，嗯，同样的问题，它比它旁边的元素低，我必须设定一个底部value@Azurry这不是问题，因为同级元素的高度/行高，只需将其更改为：bottom:4px；您不需要为帮助更改所有sizeThanks的底部值！什么是“回应线”？这最终会变成类似于
的东西吗？在这种情况下，它将改变问题和任何答案。我的打字错误意味着说响应
.line-right hr{
    position: absolute;
    bottom: 0;
    width: 100%;
    border: 0;
    border-bottom: 5px #BFE2CA solid;
    }

<div class="container">
        <div class="we-are">
            <div class="row">
                <div class="parent">
                    <h2>We are.</h2>
                </div>
            </div>
        </div>
 </div>

h2 {
  margin: 0;
}

.parent {
  position: relative;
  width: auto;
  display: inline-block;
}

.parent:after{
    display: block;
    content: "";
    position: absolute;
    bottom: 4px;
    left: calc(100% + 20px);
    width: 500px; /* Or whatever you need, e.g. width: calc(100vw - 200px); */
    height: 5px;
    background: #BFE2CA;
}

top: 50%;
transform: translateY(-50%);