То, что должно быть на выходе:
Имеется следующая разметка:
<h2 class="block-title">Горячие новинки</h2>
Буду премного благодарен, друзья!
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак вариант - без подсчётов и костылей, с использованием flex
:
.block-title {
text-transform: uppercase;
color: #be9f7e;
display: flex;
}
.block-title:after {
border-bottom: 1px solid #be9f7e;
content: '';
flex-grow: 1;
}
.block-title span {
color: black;
padding-right: 5px;
}
<h2 class="block-title"><span>Горячие</span> новинки</h2>
В span
с классом оберните слово горячие
и отдельно отстилизуйте в черный цвет, а полосу с помощью псевдокласса :after
создайте.
На скорую руку как-то так:
.block-title {
color: #000;
}
.block-title span {
color: #650815;
}
.block-title:after {
content: "";
position: absolute;
top: 42px;
border-style: solid;
border-width: 1px 76px;
}
<h2 class="block-title"><span>Горячие</span> новинки</h2>
sass:
.views_title {
position: relative;
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
background-color: #fff;
.title {
background-color: #fff;
z-index: 1;
position: relative;
padding-right: 10px;
}
.special {
color: $main_color;
}
&:before {
content: '';
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
border-bottom: 2px solid $main_color;
}
}
html:
<h2 class="views_title">
<span class="title">
Горячие <span class="special">новинки</span>
</span>
</h2>
.block-title {
text-transform: uppercase;
overflow: hidden;
position: relative;
}
.block-title span {
display: inline-block;
color: #dda058;
}
.block-title:after {
content: '';
position: absolute;
width: 100%;
bottom: 6px;
margin-left: 10px;
border-bottom: 1px solid #dda058;
}
<h2 class="block-title">Горячие <span>новинки</span></h2>