Нарисовать линию в CSS

1,00
р.
Как можно нарисовать такую линию в CSS, чтобы она масштабировалась и растягивалась по ширине экрана?



.line-first { margin: 20px font-size: 250% color: $pinkcolor border-bottom: 4px solid #f50057 padding-bottom: 0px width: 22.4% margin-left: 100px text-align: center } .line-middle { position: relative top: -52px left: 389px border: 2px solid #f50057 width: 85px height: 0px -moz-transform: rotate(-30deg) -ms-transform: rotate(-30deg) -webkit-transform: rotate(-30deg) -o-transform: rotate(-30deg) transform: rotate(-40deg) } .line-second { border-top: 4px solid #f50057 width: 60% position: relative top: 16px margin-bottom: 0px float: right }

Title




Ответ


h1 { display: flex line-height: 1.5em } span { border-bottom: 2px solid red padding: 0 2em } h1:before, h1:after { content: "" order: 1 } h1:before { width: 1.5em background: linear-gradient(-45deg, transparent calc(50% - 1px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 1px)) } h1:after { border-top: 2px solid red flex: 1 0 0px }

Заголовок