В макете есть такой блок:
Как сделать линии слева от текста? Особенно интересует общая линия заголовка и текста. Вот моя разметка:
<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
?