Пользовательские изображения пули, плавающие вверх при увеличении

Я пытаюсь использовать звездное изображение для пользовательского маркера на <li> элемент. У меня проблема в том, что нижняя часть изображения всегда находится в нижней строке шрифта, поэтому изображение подталкивается вверх. Есть ли способ исправить эту проблему, или мне нужно просто гетто и использовать фоновое изображение CSS?

ul.features-list {
    list-style-image: url('../assets/star-bullet.svg');
    margin-left: 10px;
}

.features-item {
    font-size: 36px;
}

Образ

Мысли? Предложения?

2 ответа

Решение

Ну, вы можете использовать изображение пули как Background-image из li

Вот рабочая демоверсия: http://codepen.io/anon/pen/bjJtC

Incase, если вы не хотите использовать Background-image Вы можете попробовать этот метод:

http://codepen.io/anon/pen/Lwaky

Другие вопросы по тегам