H1标签内Span文本过短时SVG底部边框高度异常问题

当H1内的span文本较短时，作为底部边框的SVG高度会被压缩，需要让边框宽度随文本长度自适应，同时保持高度恒定。

修改方案 #

只需要调整background-size属性，固定背景图的高度为SVG本身的高度（7px），让宽度自适应span的宽度即可：

.header {
    max-width: 1000px;
    font-size: 20px;
    margin: 100px auto;
    text-align: center;
}
h1 span {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTY2IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA1NjYgNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMi41NzU4MUM1MC4xNDMxIDEuOTgxODMgMTE5LjM5NyAxLjgzODkyIDE2Ny41ODUgMi4xODY1OUMyNTkuMjIyIDIuODQ3NzMgMzY3LjcwOCA4LjE3MjI3IDU2NCAyLjE4NjU5IiBzdHJva2U9IiM5N0VDQTMiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
    padding-bottom: 4px;
    /* 固定背景图高度为SVG原高度7px，宽度自适应span宽度 */
    background-size: 100% 7px;
    background-repeat: no-repeat;
    background-position: bottom;
    display: inline-block;
    color: orange;
}

原理说明 #

• background-size: 100% 7px中，第一个值100%让背景图宽度完全匹配span的宽度，第二个值7px强制背景图高度保持SVG原本的尺寸，不会随span的宽度缩放。
• 调整后，无论span内文本长短，底部SVG边框的高度都能保持恒定，宽度则自动适配文本长度。

内容的提问来源于stack exchange，提问作者Vikas Patel