Как сделать общую линию для заголовка и текста?

Question

В макете есть такой блок:

Как сделать линии слева от текста? Особенно интересует общая линия заголовка и текста. Вот моя разметка:

<section class="fullscreen story">
                <img class="fullscreen__bg story__bg" src="./images/story-bg.png" alt="">
                <div class="fullscreen__body story__content">
                    <div class="story__text-inner">
                        <h2 class="title story__title">Don’t just read the story. Be the story.</h2>
                        <p class="story__text">With Story Time you can bring your children’s favorite stories to life with
                            music, animation and AR effects.</p>
                    </div>
                    <ul class="story__list">
                        <li class="story__list-item">Discover</li>
                        <li class="story__list-item">Put a smile on your face with AR masks.</li>
                        <li class="story__list-item">A photo frame that’s picture-perfect</li>
                    </ul>
                </div>
            </section>

Я объединил заголовок и текст в общий блок story__text-inner и пытаюсь реализовать эту линию через :before Вот scss

.story {
    &__text-inner {
        &:before {
            content: "";
            width: $base;
            min-height: 100%;
            border-right: $base solid $bg-secondary-dark;
        }
    }

Вот что получилось

Линия есть, но она сверху. Что добавить в scss?

Answer 1

Лучше применить абсолютное позиционирование вместо высоты:

.wrap {
  padding-left: 40px;
  position: relative;
}

.wrap::before {
  content: "";
  width: 2px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 1px;
}

<div class="wrap">
  <h1>Заголовок</h1>
  <p>Какой-то текст</p>
  <p>Ещё один текст</p>
</div>

Answer 2

Обычный border

.story {
  border-left: 3px solid black;
  padding-left: 15px;
}

.story h2 {
  margin: 0 0 20px 0;
}

<section class="fullscreen story">
  <div class="fullscreen__body story__content">
    <div class="story__text-inner">
      <h2 class="title story__title">Don’t just read the story. Be the story.</h2>
      <p class="story__text">With Story Time you can bring your children’s favorite stories to life with music, animation and AR effects.</p>
    </div>
    <ul class="story__list">
      <li class="story__list-item">Discover</li>
      <li class="story__list-item">Put a smile on your face with AR masks.</li>
      <li class="story__list-item">A photo frame that’s picture-perfect</li>
    </ul>
  </div>
</section>

.story {
  border-left: 3px dotted black;
  padding-left: 15px;
}

.story h2 {
  margin: 0 0 20px 0;
}

<section class="fullscreen story">
  <div class="fullscreen__body story__content">
    <div class="story__text-inner">
      <h2 class="title story__title">Don’t just read the story. Be the story.</h2>
      <p class="story__text">With Story Time you can bring your children’s favorite stories to life with music, animation and AR effects.</p>
    </div>
    <ul class="story__list">
      <li class="story__list-item">Discover</li>
      <li class="story__list-item">Put a smile on your face with AR masks.</li>
      <li class="story__list-item">A photo frame that’s picture-perfect</li>
    </ul>
  </div>
</section>

БЛОГ НА HUSL

Как сделать общую линию для заголовка и текста?

Ответы (2 шт):