标题旁边的响应行

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

        <div class="we-are">

            <div class="row">

                <div class="parent">

                    <h2>We are.</h2>

                </div>

            </div>

        </div>

 </div>

这是你的 CSS，其中的行是由后面的 _pseudo-element 组成的：

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;

}

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

top: 50%;

transform: translateY(-50%);

这是一个正在运行的 Codepen：https://codepen.io/alezuc/pen/dyYGxYY

Answer 2

当字体或屏幕变化时，您应该使用类似动态的东西，您必须首先将线条设置为句点符号，然后即使您增加/减少不应该改变线条的字体。

你可以尝试这样的事情。您可以尝试更改字体，您会看到线条粘在相同的位置，您只需根据字体增加线条的高度即可。

片段

* {

  padding: 0;

  margin: 0;

  border: 0;

}

.container {

  margin: 5px;

  border: 1px solid red;

}

.parent {

  position: relative;

  width: auto;

  display: inline-block;

  font-size:3em; /* change the size and see the difference */

}

.parent:after {

  content: "";

  position: absolute;

  bottom: 20%;

  left: calc(100% + 20px);

  width: 500px;

    /* height is the only thing you have to change irrespective of the font. */

  height: 5px;

  background: #BFE2CA;

}

<div class="container">

  <div class="we-are">

    <div class="row">

      <div class="parent">

        <h2>We are.</h2>

      </div>

    </div>

  </div>

</div>