如何移动Bootstrap标题文本且不改变自定义SVG下划线位置？

架构老林

2026-7-14

自定义SVG下划线：仅偏移标题文本不移动下划线

问题场景

你需要给标题添加自定义SVG下划线，要求下划线固定在Bootstrap网格最左侧，仅让标题文本向右偏移，但使用ml-4或margin-left会同时移动文本和下划线，当前代码如下：

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

解决方案

方案1：用`<span>`包裹文本分离布局控制

给标题文本单独套一个<span>，只给这个span设置左侧间距，下划线伪元素属于外层h1，位置不受影响：

修改后的HTML

<div class="container">
    <div class="row">
        <h1 class="underline-text"><span class="ml-4">News feed</span></h1>
    </div>
</div>

原有CSS无需修改，直接保留即可。

方案2：通过CSS计算调整伪元素位置

如果不想额外添加标签，可以给h1设置左侧内边距，再通过负偏移让下划线回到原位置：

修改后的CSS

.underline-text {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    padding-left: 1.5rem; /* 对应Bootstrap ml-4的间距值 */
    &::before {
        content: "";
        background-image: url("./../../dist/img/underline.svg");
        background-repeat: no-repeat;
        position: absolute;
        bottom: 0;
        left: -1.5rem; /* 抵消padding-left，让下划线回到网格最左侧 */
        width: calc(100% + 1.5rem); /* 补全宽度，保证下划线长度正确 */
        height: 50px;
        z-index: -1;
    }
}