标题旁边的响应行

Question

我正在尝试在标题旁边获取响应行

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

我尝试使用带有边框底部的 Div 但它不合适，因为它的边框位置较低，然后我尝试使用一个<hr并且它没有正确对齐的同样的东西有一个在底部中心等。

如何实现类似的效果，而不必每隔几个像素设置响应式样式。

<div class="container">

        <div class="we-are">

            <div class="row">

                <div class="col-md-4">

                    <h2>We are.</h2>

                </div>

                <div class="col-md-8 line-right">

                    <hr>

                </div>

            </div>

        </div>

    </div>

.line-right hr{

    position: absolute;

    bottom: 0;

    width: 100%;

    border: 0;

    border-bottom: 5px #BFE2CA solid;

    }

我的结果：

我确实意识到我当然可以做类似的事情 marign-top:50px 但它不会非常敏感

Answer 1

我建议使用伪元素的不同方法这里是你的 HTML 代码：<div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="we-are">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="parent">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>We are.</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;</div>这是你的 CSS，其中的行是由后面的 _pseudo-element 组成的：h2 {&nbsp; margin: 0;}.parent {&nbsp; position: relative;&nbsp; width: auto;&nbsp; display: inline-block;}.parent:after{&nbsp; &nbsp; display: block;&nbsp; &nbsp; content: "";&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; bottom: 4px;&nbsp; &nbsp; left: calc(100% + 20px);&nbsp; &nbsp; width: 500px; /* Or whatever you need, e.g. width: calc(100vw - 200px); */&nbsp; &nbsp; height: 5px;&nbsp; &nbsp; background: #BFE2CA;}如果你想让线条垂直对齐，只需相应地改变你的CSS（删除底部并添加顶部）：top: 50%;transform: translateY(-50%);这是一个正在运行的 Codepen：https://codepen.io/alezuc/pen/dyYGxYY

Answer 2

当字体或屏幕变化时，您应该使用类似动态的东西，您必须首先将线条设置为句点符号，然后即使您增加/减少不应该改变线条的字体。你可以尝试这样的事情。您可以尝试更改字体，您会看到线条粘在相同的位置，您只需根据字体增加线条的高度即可。片段* {&nbsp; padding: 0;&nbsp; margin: 0;&nbsp; border: 0;}.container {&nbsp; margin: 5px;&nbsp; border: 1px solid red;}.parent {&nbsp; position: relative;&nbsp; width: auto;&nbsp; display: inline-block;&nbsp; font-size:3em; /* change the size and see the difference */}.parent:after {&nbsp; content: "";&nbsp; position: absolute;&nbsp; bottom: 20%;&nbsp; left: calc(100% + 20px);&nbsp; width: 500px;&nbsp; &nbsp; /* height is the only thing you have to change irrespective of the font. */&nbsp; height: 5px;&nbsp; background: #BFE2CA;}<div class="container">&nbsp; <div class="we-are">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="parent">&nbsp; &nbsp; &nbsp; &nbsp; <h2>We are.</h2>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>