我试图创建一个自定义svg下划线的标题。结果应该是这样的：
x1c 0d1x的数据
到目前为止，我的代码看起来像这样：
超文本标记语言：

<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;
    }
}

型
结果如下：

的
如何在不改变下划线位置的情况下移动文本？目前，它粘在Bootstrap网格的最左边，我觉得很好。但是，我想把文本向右移动一点。我试过使用ml-4，但它根本不起作用。同时，mx-4移动文本和下划线。如果我在CSS部分中设置margin-left，也会发生同样的情况。