Как сделать такие линии по бокам текста?

Question

[mukzer]

Как сделать такие горизонтальные серые линии возле текста? (Адаптивно)

https://codepen.io/Mukzer/pen/jOmmPBy?editors=0100

Comments

[Ankhena]

Осталось задать для псевдо ширину в vw, а не в %
И overflow для ближайшей обертки с шириной равной ширине окна (ну или до куда должны быть эти полоски)

Альтернатива: использовать грид вместо флекса. Или пользоваться flex-grow, flex-shrink

Альтернатива 2: задать спану цвет фона, а заголовку полоску градиентом

[Roman Prokopets]

можно border-right/border-left и паддинг еще по тем же сторонам

[mukzer]

Ankhena, У меня проблема что бы сделать эти линии адаптивными

[Ankhena]

mukzer, не очень понятно в чем именно она заключается.
И какого эффекта при адаптиве вы хотите достичь? Я могу сходу придумать по меньшей мере 3 варианта.

[Ankhena]

mukzer, с учетом вышесказанного не вижу проблем с адаптивом https://jsfiddle.net/526kts0v/

Answer 1

[Anton]

Можно сделать так:
добавить два элемента
между этими элементами сделать блок с текстом
разместить все элементы с помощью флексбокс
HTML:
div class="container"
hr
div class="text"Кухня по вашим предпочтениям/div
hr/
/div
CSS:
.container{
display: flex;
justify-content: space-around
}
.line{
width: ширина по вашему предпочтению;
color: red;
}
.text{
padding: 0
}
UPD: убрал символы < и >, так как теги не отображаются в ответе

Comments

[Ankhena]

Для вставки кода есть кнопочка в редакторе.

И hr это семантический тег.
Для украшений используют псевдоэлементы.