I'm working on creating a unique custom SVG underline for a header design. My goal is to achieve something similar to this:
https://i.sstatic.net/EI1aT.png
Here's what my code currently looks like:
HTML:
<div class="container">
<div class="row">
<h1 class="ml-4 underline-text">News feed</h1>
</div>
</div>
CSS:
.underline-text {
position: relative;
display: inline-block;
padding-bottom: 10px;
&::before {
content: "";
background-image: url("./../../dist/img/underline.svg");
background-repeat: no-repeat;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: -1;
}
}
This is the current result:
https://i.sstatic.net/IYCe2.png
I'm looking to adjust the text alignment without affecting the position of the underline. Currently, the text aligns with the very start of the grid due to Bootstrap, which is fine, but I would like to shift the text slightly to the right. I've tried using ml-4 class, but it doesn't work as expected. Applying mx-4 moves both the text and underline together. The same issue occurs when setting margin-left in the CSS section.