Css SVG：如何使SVG与文本宽度相同？

我希望在链接下面有一条svg线，这样我就可以为它设置动画。我正在努力使svg与文本的宽度相同

a{
文字装饰：无；
}
.按钮{
显示：内联块；
文本对齐：居中；
}

---

问题在于SVG影响了

.button

元素的宽度

要解决这个问题，请为

.button

元素指定一个

位置：relative

，然后使SVG

位置：absolute

。您的SVG将仅与按钮文本一样宽

编辑 我添加了一个动画版本。按照SVG的工作方式，您可能需要添加到SVG以使其正确缩放

div{
利润率：0.50px；
}
.按钮{
文字装饰：无；
显示：内联块；
文本对齐：居中；
位置：相对位置；
}
svg{
位置：绝对位置；
顶部：自动；
底部：-15px；
左：0；
}
.按钮.动画{
文字装饰：无；
显示：内联块；
文本对齐：居中；
位置：相对位置；
}
.button.svg动画{
高度：3倍；
宽度：0；
过渡：宽度。2秒；
}
.按钮。动画：悬停svg{
宽度：100%；
}

---

问题在于SVG影响了

.button

元素的宽度

要解决这个问题，请为

.button

元素指定一个

位置：relative

，然后使SVG

位置：absolute

。您的SVG将仅与按钮文本一样宽

编辑 我添加了一个动画版本。按照SVG的工作方式，您可能需要添加到SVG以使其正确缩放

div{
利润率：0.50px；
}
.按钮{
文字装饰：无；
显示：内联块；
文本对齐：居中；
位置：相对位置；
}
svg{
位置：绝对位置；
顶部：自动；
底部：-15px；
左：0；
}
.按钮.动画{
文字装饰：无；
显示：内联块；
文本对齐：居中；
位置：相对位置；
}
.button.svg动画{
高度：3倍；
宽度：0；
过渡：宽度。2秒；
}
.按钮。动画：悬停svg{
宽度：100%；
}