В макете есть несколько подобных подзаголовков
Надеюсь, образец видно на скрине. Сам заголовок находится в ограничивающем контейнере, а линия после него доходит до правого края экрана. Как я понял линию надо делать через ::after
и абсолютное позиционирование, но у меня эта линия перечеркивает часть заголовка. Подскажите, как ее правильно сверстать. Вот код:
.page-section__suptitle {
color: #C2C2C2;
font-size: 14px;
font-weight: 300;
line-height: 16px;
display: inline-block;
text-transform: uppercase;
position: relative;
}
.page-section__suptitle::after{
content: "";
position: absolute;
left: 40px;
top: 50%;
width: 100vh;
height: 1px;
background-color: #c2c2c2;
}
<h6 class="page-section__suptitle">our services</h6>
our services
вspan
и задайте ему фоновыйbackground-color
. Так он перекроет линию.