Добавление SVG в качестве псевдоэлемента - PullRequest
Новая
       89

Добавление SVG в качестве псевдоэлемента

0 голосов
/ 19 марта 2020

Я пытаюсь поместить 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 и маленький имеют разные размеры - таким образом, svg должен быть по размеру и выровнен по-разному , Как я могу изменить код, чтобы svg всегда адаптировался к тому, что находится перед ним?

1 Ответ

1 голос
/ 19 марта 2020 
.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;
}
...