What should be the output: enter image description here

The following markup is available:

<h2 class="block-title">Горячие новинки</h2>

I would be very grateful, friends!

    4 answers 4

    In a span with a class, wrap the word горячие and separate it off to black color, and create a strip using the pseudo-class :after .
    In a hurry, something like this:

     .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>

    • Thank! And how to make a strip so that it does not enter the text? - Vitaliy Demchuk
    • Now I’ll throw a sketch, pseudo-class after can be styled ... - Boris Runs
    • Implemented through crutches :) Thank you for giving the desired vector. - Vitaliy Demchuk
    • supplemented the answer, if I could help it, then mark the answer correctly) - Boris Runs
    • Yes of course! Thank! Glad there are such people! - Vitaliy Demchuk 5:38 pm

    As an option - without calculations and crutches, using 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>

    • Great option. - Vitaliy Demchuk 8:54 pm

    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>