CSS how can i anchor svg to text?

Question

i am trying to attach custom underline to text-span, so it always follows the text.

<div class="title-wrapper">

    <h1 class="main--title">This works like <span class="main--title-magic">magic</span> </h1>
         
    <img src="./images/magic_underline.svg" alt="" class="magic--underline">
                
</div>

my goal is to attach image to span, couldn't figure out it yet, i was thinking using absolute position for image, but it won't be responsive , will it?

Answer 1

.main--title-magic::after {
    content: "";
    position: absolute;
    bottom: -1px; 
    left: 0;
    width: 100%; 
    height: 1px; 
    background-image: url('./images/magic_underline.svg');
    background-repeat: repeat-x;
    background-size: contain;
}

This will create an ::after pseudo element, to the text span, with the ::after being an empty element but has a background image as the svg, and repeat it horizontally, it will always contain the full svg image and follow the text span and be responsive.