Отзывчивая строка рядом с заголовком

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 после:

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

Yous должен использовать что-то вроде dynamici c, когда шрифт или экран меняются, сначала необходимо установить строку для символа точки, а затем даже если вы увеличиваете / уменьшаете шрифт, который не должен изменять строку.

Вы можете попробовать что-то вроде этого. Вы можете попытаться изменить шрифт, и вы увидите, что линия придерживается той же позиции, и вам просто нужно увеличить высоту линии на основе шрифта.

Фрагмент

* {
  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>