添加 svg 作为伪元素

Question

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

    .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

.mydiv:after{
       content:"";
       display:inline-block;
       width:20px;
       height:20px;
       background-image: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>");
       background-size:contain;
       background-position:bottom center;
       background-repeat:no-repeat;
}