CSS 我如何将 svg 锚定到文本？

Question

我正在尝试将自定义下划线附加到文本范围，因此它始终跟在文本之后。

<div class="title-wrapper">

    <h1 class="main--title">This works like <span class="main--title-magic">magic</span> </h1>
         
    <img src="./images/magic_underline.svg" alt="" class="magic--underline">
                
</div>

我的目标是将图像附加到 span，我还想不出来，我在考虑对图像使用绝对position，但它不会响应，是吗？

Answer 1

.main--title-magic::after {
    content: "";
    position: absolute;
    bottom: -1px; 
    left: 0;
    width: 100%; 
    height: 1px; 
    background-image: url('./images/magic_underline.svg');
    background-repeat: repeat-x;
    background-size: contain;
}

这将创建一个 ::after 伪元素，到文本范围，::after 是一个空元素，但背景图像为 svg，并水平重复它，它将始终包含完整的 svg 图像并跟随文本跨越并做出反应。