将svg添加为伪元素

Question

我正在尝试将svg作为伪元素放置在两个不同的div之后。我的代码是

    .mydiv:after{
           content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='2em' height='1.5em' ><path d='M32,43.71a3,3,0,0,1-2.12-.88L12.17,25.12a2,2,0,0,1,0-2.83l1.42-1.41a2,2,0,0,1,2.82,0L32,36.47,47.59,20.88a2,2,0,0,1,2.82,0l1.42,1.41a2,2,0,0,1,0,2.83L34.12,42.83A3,3,0,0,1,32,43.71Z'/></svg>");
           position:relative;
    }

和HTML

    <h4><div class="mydiv">...</div></h4>
    <small><div class="mydiv">...</div></small>

我的问题是h4和Small的大小不同-因此，svg的大小和对齐方式需要不同。如何更改代码，以便svg始终适应其前面的内容？

Answer 1