How to position svg that underlines a text properly
I have to get this svg positioned rigth below the text (with a min space between the text and the svg) and it has to follow the size of the text (which changes according to the width of the screen)
By now the svg is positioned like this:
Html:
<h2 class="dark-olive-text bolder">
<span>¡Así, juntos hacemos un </span>
<span class="underlined-element">mundo mejor!</span>
</h2>
Css:
/*The variable that sets the font size and is used in my h2*/
--font-size-title-page: clamp(2.5rem, 5vw, 3.75rem);
.underlined-element::after {
content: url('../img/underline.svg');
position: relative;
bottom: clamp(3vh, 4vh + 1vw, 7vh);
left: 7.5vw;
width: 7vw;
height: auto;
}
This way seems a bit tricky to me, and on mobile screens the svg is way above from where it's supposed to be (it can be seen on the picture I uploaded).
Would love some help with this, been scratching my head over it for too long now 😄
2 Replies